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

Question

我已经为我想到的菜单做了一个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(); 
}); 

这个例子可以看到n在此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/