使用 Magellan 扩展和折叠 Foundation 6 手风琴菜单

Question

我已经使用 Foundation 6 手风琴菜单和 Magellan 构建了一个测试站点：http://studiospaces.vlvtn.com/test

我希望当您滚动到相关部分（例如#header-1、#header-2）时，顶层 headers 展开和折叠。

这有点超出我的能力范围，我们将不胜感激任何在正确方向上的帮助！

提前致谢。

埃文.

Answer 1

好问题...

玩过这个，我想我已经破解了它，希望评论会有意义。

magellan update.zf.magellan 触发了一个我用过的事件。这几乎在鼠标滚动时触发。

当 Magellan 添加一个 active class 当前活动锚点时，我正在获取此元素并将其与存储的 lastActive 变量进行比较。如果它们不同，则该部分已更新。

然后我检查当前活动锚点是否是子菜单的 child，如果不是我关闭所有打开的菜单。如果是 child 我打开它 parent.

您可以使用 Accordion docs page

中描述的方法打开和关闭手风琴菜单

此方法依赖于 classes，因此它可能不适用于您的设置。如果使用深度链接，您可以使用 url 中的当前 # 来检测更改。

//store the last active element
var lastActive = null;
//update called when magellan changes
$('#test-menu').on('update.zf.magellan', function() {

  //get the curerntly active section in the menu
  var $active = $(this).find('a.active');
  //the active anchor has changed - use the HTML element to compare
  if (lastActive !== $active[0]) {

    lastActive = $active[0];

    /*
     does the ative element have a parent <ul> that is a submenu
     <ul class="menu vertical nested submenu is-accordion-submenu is-active"> <--- This element
     <li>
     <a href="#" class="active">Item 1A</a> <-- the active element
     </li>
     <li>
     <a href="#" >Item 1BA</a>
     </li>
     </ul>
     */
    var isActiveParentASubmenu = $active.parent().parent().hasClass('is-accordion-submenu'); //the UL
    //
    if (!isActiveParentASubmenu) {
      //current active does not have a parent that is a submenu, therefore close all open submenus
      $('#test-acc').foundation('up', $('.is-accordion-submenu'));
    } else {
      //current active is a child of a subment, open the sub menu it belongs to
      $('#test-acc').foundation('down', $active.parent().parent());
    }
  }


});

<div data-sticky-container>
  <div class="sticky" data-sticky data-options="marginTop:0;" style="width:100%">
    <div id="test-menu" data-magellan>

      <ul id="test-acc" class="vertical menu" data-accordion-menu data-multi-open="false">
        <li>
          <a href="#first">First Arrival</a>
          <ul class="menu vertical nested">
            <li><a href="#first-a">First A</a>
            </li>
            <li><a href="#first-b">First B</a>
            </li>
          </ul>
        </li>
        <li><a href="#second">Second Arrival</a>
        </li>
        <li><a href="#third">Third Arrival</a>
          <ul class="menu vertical nested">
            <li><a href="#third-a">Third A</a>
            </li>
            <li><a href="#third-b">Third B</a>
            </li>
          </ul>
        </li>
      </ul>

    </div>
  </div>
</div>

<div class="sections">
  <section id="first" data-magellan-target="first">
    <h1>First Section</h1>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
  </section>
  <section id="first-a" data-magellan-target="first-a">
    <h1>First A</h1>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
  </section>
  <section id="first-b" data-magellan-target="first-b">
    <h1>First B</h1>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
  </section>
  <section id="second" data-magellan-target="second">
    <h1>Second Section</h1>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
  </section>
  <section id="third" data-magellan-target="third">
    <h1>Third Section</h1>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
  </section>
  <section id="third-a" data-magellan-target="third-a">
    <h1>Third A</h1>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
  </section>
  <section id="third-b" data-magellan-target="third-b">
    <h1>Third B</h1>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
  </section>
</div>

使用 Magellan 扩展和折叠 Foundation 6 手风琴菜单

Expanding and Collapsing Foundation 6 Accordion Menu on Scroll with Magellan

javascript

jquery

accordion

magellan

zurb-foundation