【问题标题】：jQuery toggle underlinejQuery 切换下划线
【发布时间】：2011-06-08 07:10:31
【问题描述】：

我有一个通过单击链接进行切换的菜单。我希望该链接在菜单可见时加下划线，并且在隐藏时没有装饰。我无法正确使用该功能：第一次按下触发按钮时显示下划线，但隐藏菜单后仍保持。

感谢您的帮助！

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

【问题讨论】：

标签： jquery css toggle slide underline

【解决方案1】：

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

css

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

demo on the go

【讨论】：

这仍然会在幻灯片完成之前切换类

【解决方案2】：

您需要使用 .slideToggle() 的回调部分

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

});

这将在幻灯片完成后触发 css 更改。

我还建议你在你的 CSS 中设置一个 .underline 类来设置下划线。和其他人一样，我也会为此提供 css 规则，非常基本。使用通用 .underline 还可以提高可重用性，因为您可以在站点的任何位置使用它来设置下划线文本装饰

.underline {
   text-decoration: underline;
}

【讨论】：