【问题标题】:unable to use accordion in foundation 5无法在基础 5 中使用手风琴
【发布时间】:2019-10-13 00:57:37
【问题描述】:

我正在尝试在基础 5 中使用手风琴,但仍然无法正常工作。谁能指导我哪里做错了

<!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/css/foundation.min.css">
     <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/vendor/jquery.js">
     </script>
     <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation.min.js">
     </script>
     <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation/foundation.accordion.js">
     </script>

     <script>
    $(document).foundation({
      accordion: {
        callback : function (accordion) {
          console.log(accordion);
        }
      }
    });
  </script>
</head>

<body>

<ul class="small-block-grid-1 medium-block-grid-3">
        <li>
          <ul class="accordion" data-accordion="myAccordionGroup">
            <li class="accordion-navigation">
              <a href="#panel1c">Accordion 1</a>
              <div id="panel1c" class="content">
                Panel 1. Lorem ipsum dolor
              </div>
            </li>
            <li class="accordion-navigation">
              <a href="#panel2c">Accordion 2</a>
              <div id="panel2c" class="content">
                Panel 2. Lorem ipsum dolor
              </div>
            </li>
            <li class="accordion-navigation">
              <a href="#panel3c">Accordion 3</a>
              <div id="panel3c" class="content">
                Panel 3. Lorem ipsum dolor
              </div>
            </li>
          </ul>
        </li>        
</ul>

</body>

</html>

版本

Foundation.js - 5.4.7
Foundation.css - 5.4.7
Foundation.accordion.js - 5.4.7
jQuery - 2.1.1

【问题讨论】:

  • 控制台有错误信息吗?
  • @Ji_in_coding 我在控制台上没有收到任何错误。另外,我找到了解决方案并发布了

标签: jquery zurb-foundation zurb-foundation-5


【解决方案1】:

我发现基础 5.4.7 的解决方案不支持带有 ul 和 li 标签的手风琴。支持5.5及以上版本

https://foundation.zurb.com/sites/docs/v/5.5.3/components/accordion.html

为了使用手风琴,我需要使用 dl & dd 标签

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2023-03-26
    • 1970-01-01
    • 2013-12-16
    • 1970-01-01
    • 2021-12-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多