jQueryの停止機能が2回実行されています

Question

私はslideUp/downを使用してコンテンツを表示したり隠したりして、別のコンテンツを開くときに目に見えるコンテンツを閉じるように書きました。これは、コンテンツをクリックすることで閉じるようになるまで動作し、すぐに再度開きます。

あなたがスライドアップコードで、あなたがthis要素を扱っている次の兄弟more_details、作業しているコードの下のスライドで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

。

$("#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>