Question

我有这个切换工作正常。我只想在点击第二个时关闭一个。

现在它打开所有幻灯片。

jQuery(function($){ 
    $(document).ready(function() { 
        $("h3.symple-toggle-trigger").click(function() { 
            $(this).toggleClass("active").next().slideToggle("fast"); 
            return false; 
        }); 
    }); 
});

Answer 1

我不知道你的html是如何构造的，但是我把html的例子放在一起，它可以对你的JavaScript进行一些修改。您可能不得不修补它以获得您想要的确切效果，但我相信它非常接近。

实时预览：http://codepen.io/larryjoelane/pen/yeoGNr

HTML：

<h3 class="symple-toggle-trigger">
  Trigger 1
</h3>
<p  class="section">
  section 1
</p>
<h3 class="symple-toggle-trigger">
  Trigger 2
</h3>
<p  class="section">
  section 2
</p>
<h3 class="symple-toggle-trigger">
  Trigger 3
</h3>
<p  class="section">
  section 3
</p>

我从您的代码中删除了文档就绪函数调用。如果您在结束</body>标记之前加载脚本，则不需要它。如果要从<head>元素加载脚本，则需要将其添加回来。我重新安排了你的匿名函数wrap / closure，以便它返回jQuery对象，以防你以后想要使用另一个库和你的代码。我不知道这对你来说是否重要，我只是觉得它可能有所帮助。

JavaScript的：

(function($){//begin closure


        $("h3.symple-toggle-trigger").click(function() { 

  var active = $(this).index(".symple-toggle-trigger");

          $(this).next(".section").slideToggle("fast");

   $(".symple-toggle-trigger").each(function(i){//begin each


    //if the element index doesn't equal the active index or the element clicked on.
    if(i !== active){//begin if then

   //hide the section
   $(".section")[i].style.display = "none";

    }//end if then

   });//end each

        }); 

}(jQuery));//end closure

Answer 2

li div{ display: none;}
li div.open{ display: block;}

$(document).ready(function(){
    $(".symple-toggle-trigger").click(function(){
        $("ul li div").slideUp();
        $("ul li h3.active").removeClass("active");
        $(this).addClass("active").next().slideDown();
    });
});

<ul>
    <li>
        <h3 class="symple-toggle-trigger">Heading 01</h3>
        <div>Content</div>
    </li>
    <li>
        <h3 class="symple-toggle-trigger">Heading 01</h3>
        <div>Content</div>
    </li>
    <li>
        <h3 class="symple-toggle-trigger">Heading 01</h3>
        <div>Content</div>
    </li>
    <li>
        <h3 class="symple-toggle-trigger">Heading 01</h3>
        <div>Content</div>
    </li>
    <li>
        <h3 class="symple-toggle-trigger">Heading 01</h3>
        <div>Content</div>
    </li>

</ul>

点击此处查看演示https://jsfiddle.net/pixeldew/u5qg21fx/

切换不是clossing

2 个答案: