jQuery toggle underline
I've got a menu that toggles by clicking a link. I'd like that link to underline when the menu is visibile, and have no decoration when it's hidden. I can't get the function correct: the underline displays when you first press the trigger button, but stays after the menu is hidden.
Thanks for your help!
HTML
<div id="trigger">
<div id="menu">MENU<br/></div>
<div id="navdrop">
<a class="a transition" id="item1" href="Pages/music.html"开发者_JAVA百科 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");
});
$('#trigger').click(function (){
$('#navdrop').slideToggle(400, function(){
$('#menu').toggleClass('underline');
});
});
css
#menu.underline {
text-decoration: underline;
}
demo on the go
you need to use the callback portion of the .slideToggle()
$('#trigger').click(function (){
$('#navdrop').slideToggle(400, function() {
$('#menu').toggleClass('underline');
});
});
This will trigger the css change after the slide has completed.
I also suggest you set up a .underline
class in your css to set the underline. As others have I will also give you the css rule for this, very basic. Using a generic .underline
also improves reusability as you can use it anywhere in your site to set the underline text-decoration
.underline {
text-decoration: underline;
}
精彩评论