使用导航菜单状态，使用 jQuery 将文本从打开切换到关闭

Question

我已经为我想到的菜单做了一个jQuery切换。我想知道如何使 html 箭头具体说明导航状态是什么，即在隐藏导航时向下指向，在打开菜单时指向上方。

我对jQuery的了解是非常基本的，这是我不太了解的。

网页代码：

<div class="wrap">
  <nav class="site-nav">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </nav>
  <div class="site-nav-wrap">
    <div class="site-nav-toggle">
      &#x2193; menu &#x2191;
    </div>
  </div>
  <header>
    <h1>Header title</h1>
  </header>
  <article>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla vulputate lectus nec interdum. Praesent dapibus consectetur ante, vel pellentesque metus dapibus sed. Morbi urna tortor, mattis ornare interdum vitae, vehicula eget odio. In mi erat, pulvinar eu convallis non, aliquet eu neque.</p>
  </article>
</div>

CSS代码：

.wrap {
  margin: auto;
  width: 320px;
}
.site-nav {
  background: rgb(66,66,66);
  border-bottom: 2px solid rgb(55,55,55);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  display: block;
  float: left;
  margin: 0;
  padding: 0 10px 10px 10px;
  width: 100%;
}
.site-nav-wrap {
  height: 75px;
  float: left;
  overflow: hidden;
  width: 100%;
}
.site-nav-toggle {
  background-color: rgb(200,200,200);
  border-bottom-right-radius: 150px;
  border-bottom-left-radius: 150px;
  color: rgb(3,3,3);
  clear: both;
  cursor: pointer;
  display: block;
  height: 75px;
  line-height: 75px;
  margin: -20px auto 40px auto;
  text-align: center;
  transition: color .5s ease;
  width: 150px;
}
.site-nav-toggle:hover {
  background-color: rgb(3,3,3);
  color: rgb(200,200,200);
  transition: color .5s ease;
}
li { 
  margin-top: 10px;
}

Javascript代码：

$(document).ready(function() {
  //Menu Open Seasame Action    
  $('.site-nav-toggle').click(function() {
      $('.site-nav').slideToggle();
  });
  //Hide site-nav content.    
  $(".site-nav").hide();
});

这个例子可以在这个jsFiddle上看到：http://jsfiddle.net/FsmhB/14/

Answer 1

默认情况下，

我将箭头包装在跨度中并隐藏向上箭头。当点击事件发生时，跨度开关隐藏/显示;

.HTML

<div class="site-nav-wrap">
    <div class="site-nav-toggle">
        menu  <span>&#x2193;</span><span style="display: none;">&#x2191;</span>
    </div>
</div>

jQuery

$('.site-nav-toggle').click(function() {
    $('.site-nav').slideToggle();
    $(this).find('span:hidden').show().siblings().hide();
});

小提琴：http://jsfiddle.net/iambriansreed/FsmhB/21/