JQuery переключатель подчеркивания - PullRequest
Новая
       24

JQuery переключатель подчеркивания

0 голосов
/ 13 января 2011

У меня есть меню, которое переключается при нажатии на ссылку. Я хотел бы, чтобы эта ссылка подчеркивалась, когда меню отображается, и не имела оформлений, когда оно скрыто. Я не могу получить правильную функцию: подчеркивание отображается при первом нажатии кнопки триггера, но остается после скрытия меню.

Спасибо за вашу помощь!

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");
});

Ответы [ 2 ]

3 голосов
/ 13 января 2011 
$('#trigger').click(function (){
    $('#navdrop').slideToggle(400, function(){
         $('#menu').toggleClass('underline');
    });
});

CSS 

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

демо на ходу

0 голосов
/ 13 января 2011

вам нужно использовать часть обратного вызова .slideToggle () 

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

});

Это вызовет изменение CSS после завершения слайда.

Я также предлагаю вам установить класс .underline в вашем CSS, чтобы установить подчеркивание. Как и у других, я также дам вам правило CSS для этого, очень простое. Использование универсального .underline также улучшает возможность повторного использования, так как вы можете использовать его в любом месте на своем сайте, чтобы установить подчеркивание текста 

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