0

我已经为我想到的菜单制作了一个 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>

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/

4

1 回答 1

0

我将箭头包裹在跨度中并默认隐藏向上箭头。当点击事件发生时，跨度切换隐藏/显示；

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/

于 2012-07-06T14:57:27.297 回答