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>