2011-01-13 23 views
0

リンクをクリックするとメニューが切り替わります。メニューが表示されているときにそのリンクに下線を引いて、それが隠されているときに装飾がないようにしたい。私は関数を正しく取得することはできません:最初にトリガーボタンを押したときに下線が表示されますが、メニューが隠された後もそのまま残ります。jQueryはアンダーラインを切り替えます

ありがとうございました!

あなたはスライドが持っている後。これは、CSSの変更をトリガーする.slideToggle()

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

}); 

のコールバック部分を使用する必要がある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"); 
}); 

答えて

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

CSS

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

demo on the go

+0

は、これはまだ切り替わりますスライドが終了する前のクラス – jondavidjohn

0

完了しました。

また、あなたのCSSに.underlineクラスを設定して下線を設定することをお勧めします。他の人たちと同じように、私はあなたにこれのためのCSS規則を与えるでしょう。あなたは下線テキストの装飾を設定するためにあなたのサイトのどこにでもそれを使用することができますよう、汎用.underlineを使用しても再利用性を向上させ

.underline { 
    text-decoration: underline; 
} 
関連する問題