jQuery slideUp和toggleClass同时使用

时间:2018-07-10 10:21:47

标签: jquery

我有以下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>

1 个答案:

答案 0 :(得分:0)

使用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;
});});