Question

我有以下Jquery打开一个元素，然后在选择另一个元素时切换其他元素。

$('.tab__mobile-button').click(function () {
  $(this).parent().find('.tab__mobile').slideToggle();
  $(this).toggleClass('open');
  $(this).parent().siblings().children().next().slideUp();
  return false;
});

此外，它还应用了可转换图形的toggleClass。我想要实现的是套用在slideUp上的toggleClass。当选择或取消选择同一元素时，toggleClass可以完美地工作，但是当我选择一个元素然后选择另一个元素时，仅适用slideUp。

如何调整脚本以将toggleClass应用于所有slideUp操作？

编辑：HTML：

 <li class="tab__mobile-active">
<button class="tab__mobile-button">Course Content</button>
    <div id="tab1" class="tab__mobile">
        @Model.CourseContent
    </div>
</li>
<li>
<button class="tab__mobile-button">Who is this Course for?</button>
    <div id="tab2" class="tab__mobile">
        @Model.Participants
    </div>
</li>

Answer 1

使用sibling（）方法删除打开的同级类。

$('.tab__mobile-button').click(function () {
    console.log('xxv');
  $(this).parent().find('.tab__mobile').slideToggle();
  $(this).toggleClass('open');
  $(this).parent().siblings().children().next().slideUp();
  $(this).parents().siblings().find('.tab__mobile-button').removeClass('open')
  return false;
});});

jQuery slideUp和toggleClass同时使用

1 个答案: