Question

所以我知道这个问题已经被提出了比它应该更多的问题，并且我已经尝试了没有运气的答案。

我目前有一个手风琴式导航，每个可扩展部分旁边都有+，表示它是可扩展的。

当我点击导航中的类别时，我希望+消失，只有在点击其他类别后才会重新显示在该类别上。

我尝试过这样的事情：

$(this).toggleClass("accordion > li:before");

并且像这样：

$('.accordion li').toggleClass("accordion > li:before");

但还没有得到任何工作。您可以在我的JSFiddle

中看到下面的工作示例

JSFiddle

我目前拥有的jQuery，减去我一直在努力实现的目标：

$( document ).ready(function() {
$('.accordion li').children('ul').slideUp('fast');
$('.accordion > li').click(function () {
    $(this).siblings('li').find('ul').slideUp('fast');
    $('> ul', this).slideDown('fast');
});
$('a').click(function () {
    $('a').removeClass("a-active");
    $('li').removeClass("li-active");
    $(this).addClass("a-active");
    $(this).parent('li').addClass("li-active");
});
});

Answer 1

请参阅小提琴：http://jsfiddle.net/mGcv8/2

HTML ：为所有顶级<li>

添加了一个课程

<li class="closed">

CSS ：修改了您的+内容选择器

.accordion > li.closed:before {
    color:#959699;
    content:"+";
    float:right;
    padding:14px 70px 0 0;
}

JavaScript ：修改了li点击事件

$('.accordion > li').click(function () {
    $(this).removeClass('closed');
    $(this).siblings('li').addClass('closed').find('ul').slideUp('fast');
    $('> ul', this).slideDown('fast');
});

在jQuery手风琴Nav上切换CSS类

1 个答案: