Question

我是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>

我怎样才能做到这一点？最简单，更好。

提前谢谢大家。

Answer 1

更优雅的方式：

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

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

JQuery doc's are excellent

Answer 2

您可以使用.trigger()模拟所需标签上的点击。这是working fiddle。

在你的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');
});

jquery Accordion - 如何在页面加载时默认打开第二个选项卡

2 个答案: