Question

我想要一个.heading click .collpase处于活动状态，删除并滑动并向下滑动但所有collpase活动如何使用jquery ...我很累，如何使用一次点击和一个类激活

$(document).ready(function(){
    $('.wrapmenu .heading').on('click', function(){
        $('.wrapmenu .collpase').addClass('acitve');
    });
});

/// HTML

   <div class="heading">Transmission <span><i class="icon-caret-down"></i></div>
   <div class="collapse">
      <div class="checkbox"><label><input type="checkbox"> Automatic <span>(10)</span> </label></div>
     <div class="more-option">Show More Options <span><i class="icon-plus-sign"></i></span></div>
  </div>
</div>
    <div class="wrapmenu unicode ieUnicode">

   <div class="heading">Transmission <span><i class="icon-caret-down"></i></div>
   <div class="collapse">
      <div class="checkbox"><label><input type="checkbox"> Automatic <span>(10)</span> </label></div>
     <div class="more-option">Show More Options <span><i class="icon-plus-sign"></i></span></div>
  </div>
</div>

/// CSS

.wrapmenu {
border:1px solid #ddd;
border-bottom:1px solid #ffffff;
cursor:pointer;
}
.wrapmenu .heading {
background-color:#F5F5F5;
padding:10px;
position:relative;
}
.wrapmenu .heading  span{
float:right;
}
.wrapmenu .collapse{
background-color:#fff;
padding:10px;
border-top:1px solid #ddd;
}
.active{display:block;}

Answer 1

尝试在click事件处理程序中使用$(this)引用，并使用.next()函数定位具有类折叠的元素，因为它是当前元素的下一个兄弟

$(document).ready(function(){
    $('.wrapmenu .heading').on('click', function(){
        $(this).next('.collapse').addClass('active');
    });
});

Answer 2

使用此：

此处$(this)会为您提供当前点击的元素，.next('.collpase')会为您提供包含class=collpase的下一个元素。

$(document).ready(function(){
    $('.wrapmenu .heading').on('click', function(){
        $(this).next('.collpase').addClass('acitve');
    });
});

注意：应更正您的有效课程拼写。

Answer 3

您的选择器正在获取所有类.collapse

特定班级

$(document).ready(function(){
    $('.wrapmenu .heading').on('click', function(){
        $(this).siblings('.collapse').toggleClass('active').slideToggle(1000);


    });
});

如果您只有一个班级siblings()，

.collapse就行了。

如果您在同一家长中有多个.collapse，请按照Rajaprabhu的建议使用.next()。

如何使用multipleClass jQuery单击事件

3 个答案: