Question

我正在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');
});

Answer 1

替换：

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

使用：

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

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

Answer 2

这个怎么样：

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

https://jsfiddle.net/28gug87k/

Answer 3

您会发现从$('.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');
});

jQuery的`.not`无效

3 个答案: