jQuery的`.not`无效

时间:2015-04-27 12:19:40

标签: javascript jquery html

我正在jQuery中完成一个可折叠的菜单。点击任何标题后,它的下一个兄弟(框)应该被展开,所有其他框应该被折叠。

HTML

<div class="finbox" id="finbox1">
    <div class="finheader" id="finheader1">
        <div class="finleft">1. Before you place your order &gt; sign in  </div> <div class="finright"> </div>
    </div>
    <div class="finbody">

    </div>
</div>

<div class="finbox" id="finbox2">
    <div class="finheader" id="finheader2">
        <div class="finleft">2. Delivery Address </div> <div class="finright"> </div>
    </div>
    <div class="finbody">

    </div>
</div>

...
...
...

的jQuery

$('.finheader').click(function(e){
    $(this).next().slideDown();    // .finbody slide down
    $(this).next().addClass('selbdy');
    $(this).addClass('finsel');
    $('.finbody:not(.selbdy)').slideUp(); // All .finbody except  '.selbdy' slide down
    console.log('Slide Down');
}); 

3 个答案:

答案 0 :(得分:1)

替换:

$(this).next().addClass('selbdy');
$(this).addClass('finsel');

使用:

$('.finbody').removeClass('selbdy');
$(this).next().addClass('selbdy');
$('.finheader').removeClass('finsel');
$(this).addClass('finsel');

其余的代码看起来很好,应该可以正常工作。

答案 1 :(得分:0)

这个怎么样:

$('.finheader').click(function(e){
  $('.finbody').slideUp();
  $(this).next().slideDown();
  console.log('Slide Down');
}); 

https://jsfiddle.net/28gug87k/

答案 2 :(得分:0)

您会发现从$('.finheader').not(this)开始工作更容易。

您还需要删除所有&#39; /&#39; selbdy&#39;之前添加的课程。

$('.finheader').click(function(e) {
    $(this).addClass('finsel').next().slideDown().addClass('selbdy');
    $('.finheader').not(this).removeClass('finsel').next().slideUp().removeClass('selbdy');
});