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

我已经为我想到的菜单做了一个jQuery切换。我想知道如何使html箭头特定于导航状态，即隐藏导航时向下，打开菜单时向上

我对jQuery的了解非常基础，这是我不太理解的

HTML代码：

<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>

.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;
}

$(document).ready(function() {

  //Menu Open Seasame Action    
  $('.site-nav-toggle').click(function() {
      $('.site-nav').slideToggle();
  });

  //Hide site-nav content.    
  $(".site-nav").hide();
});

Javascript代码：

<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>

.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;
}

$(document).ready(function() {

  //Menu Open Seasame Action    
  $('.site-nav-toggle').click(function() {
      $('.site-nav').slideToggle();
  });

  //Hide site-nav content.    
  $(".site-nav").hide();
});

---

这个例子可以在这个jsFiddle上看到：

默认情况下，我将箭头包装在跨距中并隐藏向上箭头。单击事件发生时，跨度开关隐藏/显示

HTML

---

小提琴：

哇，这对你来说一定是儿戏：）这是我很欣赏的东西！非常感谢：D@j_mes您也可以在单击时交换跨距的html/文本，这样就不需要在标记中添加额外的标记。@AndrewPeacock如何交换跨距的html/文本？