个人中心
gpt4 book ai didi

javascript - 设置 Accordion 打开所有 Accordion

转载 作者：行者123 更新时间：2023-12-03 11:13:11 27 4
gpt4 key购买 nike

我正在构建一个非常简单的 Accordion ，我想设置 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/

谢谢

最佳答案

如果您有兴趣在加载时显示所有选项卡内容，您可以尝试以下操作:

$('#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>

关于javascript - 设置 Accordion 打开所有 Accordion ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27465219/

27 4 0
文章推荐： javascript - 对存储在变量中的 xml 运行 Xpath(获取 "Uncaught TypeError: undefined is not a function")
文章推荐： javascript - jquery 的append()中出现意外的字符串
文章推荐： javascript - knockout 计算的可观察量在订阅时不会评估
文章推荐： javascript - 多个图像阵列，单击按钮即可随机化图像
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com