jQuery停止功能運行兩次

Question

我正在使用 slideUp / down 來顯示和隱藏內容並將其寫入其中，當打開另一個內容時它將關閉任何可見內容。 這一直有效，直到我嘗試通過單擊關閉內容，它會立即再次打開它。

HTML

<ul class="contents">
   <li>
      while($results->fetch()){
          <div class="details">text</div>
          <div class="more_details">more text</div>
      }
   </li>
</ul>

jQuery

$("#results").on("click", ".details", function() {
    $(".open").slideUp(600, function() {
        $(".open").css("display", "none").removeClass("open");
    });

    if ($(this).hasClass("open")) {
        $(this).slideUp( 600, function() {
            $(this).css("display", "none").removeClass("open");
        });
    } else {
        $(this).next(".more_details").slideDown(600, function() {
            $(this).css("display", "show").addClass("open");
        });
    }   
});

Answer 1

在向下滑動代碼中，您正在處理下一個同級more_details ，在向上滑動代碼中，您正在處理this元素。

 $("#results").on("click", ".details", function() { var $details = $(this).next(".more_details"); $details.slideToggle(600, function() { $details.toggleClass("open"); }); $(".more_details.open").not($details).slideUp(600, function() { $(this).removeClass("open"); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="results"> <div class="details">details</div> <div class="more_details">more_details</div> <div class="details">details</div> <div class="more_details">more_details</div> <div class="details">details</div> <div class="more_details">more_details</div> <div class="details">details</div> <div class="more_details">more_details</div> </div>