Question

我正在构建一个非常简单的手风琴，我想设置ti以在页面加载时打开所有容器。让它打开一个项目（或没有项目）是没有问题的，但我怎么能让它打开页面加载的所有项目。

HTML

  <aside class="accordion">
     <h1 class="accTitle">My Title"</h1>
     <div class="accContent">
      my super cool content
     </div>

     <h1 class="accTitle">My Second Title"</h1>
     <div class="accContent">
      more super cool content
     </div>
  </aside>

的jQuery

jQuery(document).ready(function($){
var headers = ["H1" , "SPAN"];

$('.accordion h1.accTitle').eq(0).addClass('active');
$('.accordion div.accContent').eq(0).show();


$(".accordion").click(function(e) {
   var target = e.target,
   name = target.nodeName.toUpperCase();

  if($.inArray(name,headers) > -1) {
  var subItem = $(target).next();

//slideUp all elements (except target) at current depth or greater
 var depth = $(subItem).parents().length;
 var allAtDepth = $(".accordion div.accContent").filter(function() {
 if($(this).parents().length >= depth && this !== subItem.get(0)) {
    return true; 
   }
 });
$(allAtDepth).slideUp("fast");


  //slideToggle target content and adjust bottom border if necessary
  subItem.slideToggle("fast",function() {
    $(".accordion .accTitle :visible:last").css("border-radius","0 0 10px 10px");
 });
  //    $(target).css({"border-bottom-right-radius":"0", "border-bottom-left-radius":"0"});
    }
});

  $('.accordion h1.accTitle').last().addClass('accTitleLast');
  $('.accordion .accTitle').click(function(){
      $(this).toggleClass('active').siblings('.accordion .accTitle').removeClass('active');    
  });

});

这是我在jsFiddle上的链接：http://jsfiddle.net/bbyrdhouse/a6cscLjn/3/

由于

Answer 1

如果您有兴趣在加载时显示所有标签内容，可以尝试：

$('#accordion .ui-accordion-content').show();

但您可能会感受到一些UI挑战。

$( "#accordion" ).accordion();
$('#accordion .ui-accordion-content').show();

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>accordion demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>
 
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
    Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
    condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.
    Nam mi. Proin viverra leo ut odio.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
    Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
    faucibus interdum tellus libero ac justo.</p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.
    Quisque lobortis.Phasellus pellentesque purus in massa.</p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
</div>
 
<script>

</script>
 
</body>
</html>

将Accordion设置为打开所有手风琴

1 个答案: