jQuery切換下劃線

Question

我有一個菜單，通過單擊鏈接來切換。我希望鏈接在菜單可見時加下劃線，並且在隱藏時沒有裝飾。我無法獲得正確的功能：當您第一次按下觸發按鈕時會顯示下劃線，但在隱藏菜單後仍會顯示下劃線。

感謝您的幫助！

HTML

<div id="trigger"> 
     <div id="menu">MENU<br/></div> 
     <div id="navdrop"> 
      <a class="a transition" id="item1" href="Pages/music.html" alt="MUSIC">MUSIC</a><br /> 
      <a class="a transition" id="item2" href="Pages/photos.html" alt="PHOTOS">PHOTOS</a><br /> 
      <a class="a transition" id="item3" href="Pages/biography.html" alt="BIOGRAPHY">BIOGRAPHY</a><br /> 
      <a class="a transition" id="item4" href="Pages/discography.html" alt="DISCOGRAPHY">DISCOGRAPHY</a><br /> 
      <a class="a transition" id="item5" href="Pages/contact.html" alt="CONTACT">CONTACT</a><br /> 
      <a class="a" id="item6" href="http://www.blog.fernandogaribay.com" alt="BLOG" target="_blank">BLOG</a><br /> 
     </div> 
    </div> 

的Javascript

$('#trigger').click(function(){ 
     $('#navdrop').slideToggle(400); 
     $('#menu').css("text-decoration", "underline"); 
}); 

Answer 1

$('#trigger').click(function(){ 
    $('#navdrop').slideToggle(400, function(){ 
     $('#menu').toggleClass('underline'); 
    }); 
}); 

CSS

#menu.underline { 
    text-decoration: underline; 
} 

demo on the go

Answer 2

您需要使用.slideToggle（）

$('#trigger').click(function(){ 
    $('#navdrop').slideToggle(400, function() { 
     $('#menu').toggleClass('underline'); 
    }); 

}); 

的回調部分這將觸發CSS更改幻燈片有後完成。

我也建議你在你的CSS中設置一個.underline類來設置下劃線。正如其他人一樣，我也會給你這個css規則，非常基本。使用通用.underline還提高了可重用性，你可以在你的網站的任何地方使用它來設置下劃線文本修飾

.underline { 
    text-decoration: underline; 
}