jQuery停止功能运行两次

tty

我正在使用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");
        });
    }   
});

阿伦·P·约翰尼（Arun P Johny）

在上滑代码中，您正在处理下一个兄弟姐妹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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。