Question

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {

$(".content").hide();

    $('.button').click(function() 
        {
            $('.content').slideUp('normal');
            $(this).next().slideDown('normal');
            $(".button1").removeClass().addClass("button");
            $(this).removeClass().addClass("button1");
        });

});

</script>
<style>
li { list-style:none;}
.button { width: 800px; float: left; background:green; color:#fff; cursor: pointer;}
.button1 {  width: 800px; float: left; background:blue; color:#fff; cursor: pointer;}
.content {  width: 800px; float: left; background: #95B1CE; display: none; }
</style>
</head>
<body>
<ul>
  <li class="button">accordian button</li>
  <li class="content">Content 1</li>
  <li class="button">accordian button</li>
  <li class="content">Content 2</li>
  <li class="button">accordian button</li>
  <li class="content">Content 3</li>
</ul>
</body>
</html>

Answer 1

您应该使用ID来引用您的元素。另外我认为你的html结构不是最好的。

我个人建议使用这样的东西：

<ul>
  <li class="selected" id="button1">
    <div class="button">accordion button</div>
    <div class="content">Content 1</div>
  </li>
  <li id="button2">
    <div class="button">accordion button</div>
    <div class="content">Content 2</div>
  </li>
  <liid="button3">
    <div class="button">accordion button</div>
    <div class="content">Content 3</div>
  </li>
</ul>

现在默认选择第一个，使用css。

.content {
  display: none;
}

.selected .content {
  display: block;
}

脚本也应该改变：

$(".button").click(function () {
  var selected = $(".selected");
  selected.children(".content").slideUp();
  selected.removeClass("selected");
  var button = $(this);
  button.next().slideDown();
  button.parent().addClass("selected"); // optional
});

未经测试，但我认为这是可以理解的。

Answer 2

在$(".content:eq(0)").show();

之后添加$(".content").hide();

实际上不需要$(".content").hide();。你正在制作显示：css

中没有

它将起作用jsfilddle

在下面找到完整的Js：

$(document).ready(function() {

//$(".content").hide();
$(".content:eq(0)").show();
$('.button:eq(0)').addClass('button1');

$('.button').click(function() 
    {
        $('.content').slideUp('normal');
        $(this).next().slideDown('normal');
        $(".button").removeClass("button1");
        $(this).addClass("button1");
    });

}）;

Accordion菜单 - 默认情况下如何保持第一个div打开

2 个答案: