使用導航菜單狀態使用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/