Question

我正在使用http://foundation.zurb.com/sites/docs/accordion-menu.html 但根文件夹只能打开/关闭。我正在寻找一个想法，根上的文字是一个链接，箭头打开/关闭文件夹时单击。

<ul class="vertical menu" data-accordion-menu>
  <li>
    <a href="#">This should be link and be able to fold out depending on if text or arrow is clicked</a>
    <ul class="menu vertical nested">
      <li><a href="#">Item 1A</a></li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
</ul>

Answer 1

我还需要父元素中的链接。
看这里https://codepen.io/brettsmason/pen/BjmOoZ/

$(document).foundation();

$('.has-submenu').each(function(){
  var randomID = "id-" + Math.floor((Math.random() * 100) + 1);

  $('.has-submenu').find('.submenu').attr('id', randomID);
  $('.has-submenu').find('.toggle').attr('data-toggle', randomID);
});

.submenu {
  display: none;
}

.menu li {
  background: #eeeeee;
  border-bottom: 1px solid #fff;
}

.submenu li {
  background: #ccc;
}

.submenu.expanded {
  display: block;
}

li {
  position: relative;
}

.toggle {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px 15px;
  background: #cccccc;
  color: #000;
}

<link rel="stylesheet prefetch" href="https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.1/foundation.min.js"></script>
<ul class="vertical menu" style="width: 300px;">
  <li class="has-submenu">
    <a href="#">One</a>
    <button class="toggle">+</button>
    <ul class="vertical menu submenu" data-toggler=".expanded">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
    </ul>
  </li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

Answer 2

获得基础文档（https://get.foundation/sites/docs/accordion-menu.html）：

子菜单切换手风琴菜单可以有一个单独的子菜单切换。这允许父项目具有其自己的链接，但仍允许打开/关闭子菜单。您需要添加类accordion-menu和数据属性data-submenu-toggle="true"才能正常工作。

 <ul class="vertical menu accordion-menu" data-accordion-menu data-submenu-toggle="true">
  <li>
    <a href="https://get.foundation/" target="_blank">Link here, dropdown there →</a>
    <ul class="menu vertical nested">
      <li>
        <a href="#">Item 1A</a>
        <ul class="menu vertical nested">
          <li><a href="#">Item 1Ai</a></li>
          <li><a href="#">Item 1Aii</a></li>
          <li><a href="#">Item 1Aiii</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
      <li><a href="#">Item 1C</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 2</a>
    <ul class="menu vertical nested">
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a></li>
</ul>

可点击的父链接基础手风琴菜单

2 个答案: