設置手風琴以打開所有手風琴

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>

設置手風琴以打開所有手風琴

問題描述

1 個解決方案

解決方案1
1 已采納 2014-12-14 00:56:02

設置手風琴以打開所有手風琴

問題描述

1 個解決方案

解決方案1 1 已采納 2014-12-14 00:56:02

解決方案1
1 已采納 2014-12-14 00:56:02