如何使第一个手风琴选项卡默认打开？

Question

我想让这个手风琴中的第一个选项卡默认打开。

这是 cssdeck 上的代码： http ://cssdeck.com/labs/5jlzqlt6

原文由 David Powell 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

看 这里

将此添加到您的CSS

 #accordion ul li:first-child div {
    display:block;
    border-top:3px solid #FFCDCD;
}

我还制作了一个 jq （匆忙）以使手风琴更好用

代码 ：

 $("#accordion ul li").each(function(){
var trigger= $(this).find('a')
var siblings = $(this).siblings()
var acc_text = $(this).find('.accordion')
    $(trigger).click(function(){
    var visible_text = siblings.find('.accordion').filter(":visible")
    $(acc_text).slideToggle()
    $(visible_text).slideUp()
    });
});

编辑：如果我做对了。您希望能够同时打开所有选项卡。看 这里

代码 ：

 $("#accordion ul li").each(function(){
var trigger= $(this).find('a')
var acc_text = $(this).find('.accordion')
    $(trigger).click(function(){

        $(acc_text).slideToggle()

    });
});

或者当您单击“示例二”时，您是否希望同时打开所有 3 个选项卡？这很奇怪 :) 你为什么要那样做？

片段

 $("#accordion ul li").each(function(){
    var trigger= $(this).find('a')
    var acc_text = $(this).find('.accordion')
    $(trigger).click(function(){

        $(acc_text).slideToggle()

    });
});

 body{
background:#d0d0d5;
}

/*  Basic stucture
=====================*/
#accordion{margin:100px auto;width:400px;}
#accordion ul{list-style:none;margin:0;padding:0;}
.accordion{display:none;}
.accordion:target{display:block;}
#accordion ul li a{text-decoration:none;display:block;padding:10px;}
.accordion{padding:4px;}

/*  Colors
====================*/
#accordion ul{
/*box-shadow*/
-webkit-box-shadow:0 4px 10px #BDBDBD;
   -moz-box-shadow:0 4px 10px #BDBDBD;
        box-shadow:0 4px 10px #BDBDBD;
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
}
#accordion ul li a{
background:#fff;
border-bottom:1px solid #E0E0E0;
color:#999;
}
.accordion{
background:#fdfdfd;
color:#999;
}
.accordion:target{
border-top:3px solid #FFCDCD;
}

#accordion ul li:first-child div {
display:block;
border-top:3px solid #FFCDCD;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion">
  <ul>
    <li>
      <a href="#one">Example one</a>
      <div id="one" class="accordion">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
      </div>
    </li>
    <li>
      <a href="#two">Example two</a>
      <div id="two" class="accordion">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
      </div>
    </li>
    <li>
      <a href="#three">Example three</a>
      <div id="three" class="accordion">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
      </div>
    </li>
  </ul>
</div>

原文由 Mihai T 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果你使用的是引导程序，你可以跳过所有这些复杂的东西，只需在你想要默认展开的手风琴部分的折叠类后面添加一个词：

在

class="collapse in"

哇，这很容易。

原文由 King Anu 发布，翻译遵循 CC BY-SA 3.0 许可协议