4

我是 jquery 和 javascript 的绝对菜鸟，实际上我只是使用我在网上找到的简单代码。这会创建一个手风琴列表，但我想在页面加载时打开第二个选项卡（或第一个选项卡以外的任何选项卡）。然后，当单击任何其他选项卡时，默认打开的选项卡应关闭。

这是我正在使用的代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>

<style>
    .accord-content { display: none; }
</style>
</head>

<body>
    <div class="accordion">
    <div class="accord-header">Header 1</div>
    <div class="accord-content">This is the content for the first header.</div>
    <div class="accord-header">Header 2</div>
    <div class="accord-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>

</body>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $(".accordion .accord-header").click(function() {
    if($(this).next("div").is(":visible")){
    $(this).next("div").slideUp("slow");
    } else {
    $(".accordion .accord-content").slideUp("slow");
    $(this).next("div").slideToggle("slow");
    }
    });
    });
    </script>
</html>

我怎样才能做到这一点？越简单越好。

提前谢谢大家。

4

2 回答 2

17

更优雅的方式：

$( ".selector" ).accordion({ active: 1 });

请记住，活动属性是零索引的。0 代表第一个选项卡。1 代表第二个。

JQuery 文档非常好

于 2014-03-20T12:48:35.263 回答
8

您可以使用.trigger()模拟单击​​所需选项卡。这是一个工作小提琴。

在您的 jquery 上，在 document.ready 结束之前：

$(".accordion .accord-header:eq(1)").trigger('click');

所以你的最终 JS ：

$(document).ready(function() {
    $(".accordion .accord-header").click(function() {
        if($(this).next("div").is(":visible")){
            $(this).next("div").slideUp("slow");
        } else {
            $(".accordion .accord-content").slideUp("slow");
            $(this).next("div").slideToggle("slow");
        }
    });
    $(".accordion .accord-header:eq(1)").trigger('click');
});
于 2013-09-20T10:47:27.683 回答