jQuery删除和添加类点击

Question

所以我有这个jQuery，它允许我点击一个元素，它会扩展隐藏的东西。但是你可以点击多个元素，它们都将被扩展。我只希望在任何一点都能延长......有人可以帮我解决问题吗？

if($(window).width() >= 991) { 
    $('.brands-supply .single').click(function() { 
     $id = $(this).attr('href'); 
     $($id).stop().slideDown('fast'); 
    }, function() { 
     $($id).stop().slideUp('fast'); 
    }); 
} 

HTML

<div class="brands-supply hidden-sm hidden-xs"> 
    <h2> Our Consultancy Services </h2> 
    <div class="container"> 
    <div class="row"> 
     <a class="col-md-3 single collapsed" data-toggle="collapse" href="#collapseExample0" style="background: #464648;" aria-expanded="false"> 
     <img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/cookies.png"> 
     </a> 
     <a class="col-md-3 single collapsed" data-toggle="collapse" href="#collapseExample1" style="background: #5e5e5e;" aria-expanded="false"> 
     <img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/Brian.jpg"> 
     </a> 
     <a class="col-md-3 single" data-toggle="collapse" href="#collapseExample2" style="background: #9a9a9a;"> 
     <img src="http://localhost:8888/eclectic/wp-content/uploads/2015/11/Executive_proection_services.jpg"> 
     </a> 
     <a class="col-md-3 single" data-toggle="collapse" href="#collapseExample3" style="background: #cccccc;"> 
     <img src=""> 
     </a> 
    </div> 
    <div class="row"> 
     <div class="col-md-12 collapse" id="collapseExample0" style="height: 0px; background: rgb(70, 70, 72);" aria-expanded="false"> 
     <div class="text"> 
      <div class="row"> 
      <div class="col-md-4"> 
       <img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png"> 
      </div> 
      <div class="col-md-7"> 
       <p>Reviews</p> 
       <p>&nbsp;</p> 
       <p>This si a p tag</p> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-12 collapse" id="collapseExample1" style="height: 0px; background: rgb(94, 94, 94);" aria-expanded="false"> 
     <div class="text"> 
      <div class="row"> 
      <div class="col-md-4"> 
       <img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png"> 
      </div> 
      <div class="col-md-7"> 
       <p>Testing</p> 
       <p>&nbsp;</p> 
       <p>This is a ap tag</p> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-12 collapse" id="collapseExample2" style="background: #9a9a9a;"> 
     <div class="text"> 
      <div class="row"> 
      <div class="col-md-4"> 
       <img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png"> 
      </div> 
      <div class="col-md-7"> 
       <p>Projects</p> 
       <p>&nbsp;</p> 
       <p>This is a p tag</p> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-12 collapse" id="collapseExample3" style="background: #cccccc;"> 
     <div class="text"> 
      <div class="row"> 
      <div class="col-md-4"> 
       <img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png"> 
      </div> 
      <div class="col-md-7"> 
       <p>Services</p> 
       <p>&nbsp;</p> 
       <p>This is a Ptag</p> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

任何帮助表示赞赏！

Answer 1

首次点击不会将两个函数作为参数。您应该使用slideToggle。

if($(window).width() >= 991) { 
    $('.brands-supply .single').click(
     function() { 
      var id = $(this).attr('href'); 
      $('.brands-supply .single').each(
       function() { 
        var href = $(this).attr('href'); 
        if (href == id) return; 
        $(href).slideUp('fast'); 
       } 
      ); 
      $(id).stop().slideToggle('fast'); 
     } 
    ); 
} 

因此，点击选择所有元素，你附加点击和迭代他们滑动它们，如果他们不是当前点击href。然后，只需在所点击的滑块上使用slideToggle，它就会根据当前显示的滑块向上或向下滑动它。

小提琴：http://jsfiddle.net/AtheistP3ace/xkv31rop/

JS：

same as above 

CSS：

div > div { 
    height: 100px; 
    width: 100%; 
    display: none; 
} 

#id1 { 
    background: red; 
} 

#id2 { 
    background: blue; 
} 

#id3 { 
    background: orange; 
} 

HTML：

<div class="brands-supply"> 
    <a class="single" href="#id1">id1</a> 
    <a class="single" href="#id2">id2</a> 
    <a class="single" href="#id3">id3</a> 
    <div id="id1"></div> 
    <div id="id2"></div> 
    <div id="id3"></div> 
</div>