Question

我希望默认情况下打开此手风琴中的第一个标签。

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

Answer 1

如果你正在使用bootstrap，你可以跳过所有这些复杂的东西，只需在你想要默认扩展的手风琴部分的折叠类之后添加一个单词：

在

class="collapse in"

哇，这很容易。

Answer 2

点击此处 jsfiddle

将此添加到您的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()
    });
});

编辑：如果我做对了。您希望能够在同一时间打开所有选项卡。请参阅此处 jsfiddle

代码：

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

        $(acc_text).slideToggle()

    });
});

或者你想要点击例如“例2”所有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>

Answer 3

您可以通过触发点击事件来jQuery执行此操作。

$(function(){
    $('#accordion ul li a').eq(0).trigger('click');
});

如何制作默认打开第一个手风琴标签？

3 个答案: