JQuery Toggle подчеркивает
Вопрос
У меня есть меню, которое переключается, щелкнув по ссылке. Мне бы хотелось, чтобы эта ссылка подчеркнула, когда меню визибле, и не было украшения, когда она скрыта. Я не могу получить правильную функцию: подчеркивание отображается, когда вы сначала нажимаете кнопку триггера, но остается после того, как меню скрыто.
Спасибо за вашу помощь!
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");
});
Решение
$('#trigger').click(function (){
$('#navdrop').slideToggle(400, function(){
$('#menu').toggleClass('underline');
});
});
CSS
#menu.underline {
text-decoration: underline;
}
демо на ходу
Другие советы
Вам нужно использовать обратную часть .slidetoggle ()
$('#trigger').click(function (){
$('#navdrop').slideToggle(400, function() {
$('#menu').toggleClass('underline');
});
});
Это запустит изменение CSS после завершения слайда.
Я также предлагаю вам настроить .underline
класс в вашем CSS, чтобы установить подчеркивание. Как и другие, я также дам вам правило CSS для этого, очень просто. Используя общий .underline
Также улучшается повторное использование, так как вы можете использовать его в любом месте своего сайта, чтобы установить подчеркивание текстового декорации
.underline {
text-decoration: underline;
}