Question

我的网站中有一个部分需要通过点击标题进行切换。

现在我写了这段代码来点击标题时切换

$(document).ready(function(){
$(".toggle_container").hide();
$("h4.trigger").click(function(){
  $(this).toggleClass("active").next().slideToggle("slow");
});
});

html部分：

<h4 class="trigger"><a href="javascript:void(0)">'.$row[title].'</a></h4>
<div class="toggle_container">
 <div class="block">
  '.$row[text].'
 </div>
</div>

现在使用这些代码一切正常，直到它打开每个标题点击而不关闭已打开的;

第一

现在我必须改变这个脚本，当我点击标题来切换首先检查打开的那些并关闭那些

第二

另一件事我想知道如何让第一个标题打开，当页面加载了要打开的第一个标题时

提前致谢

Answer 1

我希望其他一个答案会更新并解决这个问题，但是他们两个都没有切换，他们总是显示，这里是如何根据需要切换和隐藏其他答案：

$(function(){
  $(".toggle_container:gt(0)").hide();
  $("h4.trigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("slow")
           .siblings(".toggle_container").slideUp();
  });
});

You can try out a demo here，它显示第一个加载，并正确切换其余部分。

Answer 2

我应该这样做

$(document).ready(function(){
  $(".toggle_container").hide();
 $(".toggle_container:first").show();
  $("h4.trigger").click(function(){
    $(".toggle_container").hide();
    $(this).toggleClass("active").next().slideToggle("slow");
  });
});

Answer 3

HTML

<h4 class="trigger"><a href="javascript:void(0)">Title1</a></h4>
<div class="toggle_container">
 <div class="block">
  Test
 </div>
</div>
<h4 class="trigger"><a href="javascript:void(0)">Title2</a></h4>
<div class="toggle_container">
 <div class="block">
  Test
 </div>
</div>
<h4 class="trigger"><a href="javascript:void(0)">Title2</a></h4>
<div class="toggle_container">
 <div class="block">
  Test
 </div>
</div>

的Javascript

$(document).ready(function(){
    $(".toggle_container:gt(0)").hide();
    $("h4.trigger").click(function(){
    $(".toggle_container:visible").slideUp('slow');
  $(this).toggleClass("active").next().slideToggle("slow");
});
});

您可以在http://www.jsfiddle.net/XnV69/3/

查看工作演示

jquery的切换功能中的问题

3 个答案: