jQuery、要素タイプごとにワンクリックイベントが実行されるのを待ちますか？

Question

私は、それらのアイテムが自分のコンテンツをリストとして編成しているアイテムのリストを持っています。これまでのところ、私のjQueryはリストを展開してそのリストの項目を見ています。別のアイテムをクリックすると、以前にクリックしたアイテムを展開しないように元に戻します。

$(document).ready(function() { 
    $("li").click(function(){ 
     $(this).find("ul.bid_project").toggleClass("expanded" , 500); 
     var list_items = $(this).find("ul.bid_project > li.bidding_content"); 

     if(!list_items.is(':visible')){ 
      list_items.show(); 
     } else { 
      list_items.hide(); 
     } 
     $(this).siblings().each(function() { 
      if($(this).find("ul.bid_project").hasClass("expanded")) { 
       $(this).find("ul.bid_project").toggleClass("expanded", 500); 
       $(this).find("ul.bid_project > li.bidding_content").hide(); 
      } 
     }); 
    }); 
}); 

私の問題は、私はfuriosilyクリックイベントハンドラを持っているリチウムの全てをクリックすると、それらのそれぞれが拡大し、拡大をチェックするための独自の機能を実行することです。 1回のクリックだけを待ってから、他のノードをクリックして他のクリックを続けることは可能ですか？

<ul id="bids" class="current_bids_container"> 
    <li> 
     <ul class="bid_project"> 
      <p class="bidding_title">NYC MTA Above Grade Facility Hardening</p> 
      <li class="bidding_content">• Lmao </li> 
      <li class="bidding_content">• Lmao </li> 
      <li class="bidding_content">• Lmao </li> 
      <li class="bidding_content">• Lmao </li> 
     </ul> 
    </li> 
    <li> 
     <ul class="bid_project"> 
      <p class="bidding_title">CONEY ISLAND HOSPITAL PARKING LOT</p> 
      <li class="bidding_content">• Lmao </li> 
      <li class="bidding_content">• Lmao </li> 
      <li class="bidding_content">• Lmao </li> 
      <li class="bidding_content">• Lmao </li> 
     </ul> 
    </li> 
</ul> 

Answer 1

次のコードスニペットを作成しました。

解決方法は、toggleClassメソッドから期間を削除し、代わりにアニメーションにCSSを使用することです。

また、 "li"要素を "ul"要素の内部に配置しないことをお勧めします。ちょうどベストプラクティス。別のベストプラクティスは、アンダースコアの代わりにCSSクラス名にダッシュを使用することです（ "bidding_content"ではなく "bidding-content"）。

これが役に立ちます。 toggleClass（の2番目のパラメータは何

$(document).ready(function() { 
 

 
\t // start website with all collapsed 
 
\t $("#bids li.bidding-content").hide(); 
 
    
 
    // expand/collapse on click 
 
    $("li").click(function() { 
 
     $(this).find("ul.bid-project").toggleClass("expanded"); 
 
     var list_items = $(this).find("ul.bid-project > li.bidding-content"); 
 

 
     if(!list_items.is(':visible')){ 
 
      list_items.show(); 
 
     } else { 
 
      list_items.hide(); 
 
     } 
 
     $(this).siblings().each(function() { 
 
      if($(this).find("ul.bid-project").hasClass("expanded")) { 
 
      \t \t $(this).find("ul.bid-project").toggleClass("expanded"); 
 
       $(this).find("ul.bid-project > li.bidding-content").hide(); 
 
      } 
 
     }); 
 
    }); 
 
    
 
});

ul { 
 
    list-style-type: none; 
 
} 
 

 
ul.bid-project { 
 
    opacity: 0; 
 
    transform: translateY(-25px); 
 
} 
 

 
.expanded { 
 
    transition: 1s; 
 
    opacity: 1 !important; 
 
    transform: translateY(0px) !important; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 

 
<ul id="bids" class="current-bids-container"> 
 
    <li> 
 
     <p class="bidding-title">NYC MTA Above Grade Facility Hardening</p> 
 
     <ul class="bid-project"> 
 
      <li class="bidding-content">• Lmao </li> 
 
      <li class="bidding-content">• Lmao </li> 
 
      <li class="bidding-content">• Lmao </li> 
 
      <li class="bidding-content">• Lmao </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <p class="bidding-title">CONEY ISLAND HOSPITAL PARKING LOT</p> 
 
     <ul class="bid-project"> 
 
      <li class="bidding-content">• Lmao </li> 
 
      <li class="bidding-content">• Lmao </li> 
 
      <li class="bidding-content">• Lmao </li> 
 
      <li class="bidding-content">• Lmao </li> 
 
     </ul> 
 
    </li> 
 
</ul>