展開和摺疊基金會6摺疊式菜單上滾動與麥哲倫

Question

我已經建立了使用基金會6摺疊式菜單和麥哲倫測試地點：http://studiospaces.vlvtn.com/test

我想頂層標頭中展開，當你到達相對部分坍塌（例如＃header-1，＃header-2）。

這是有點超出我的能力，任何幫助正確的方向將非常感激！

預先感謝您。

埃文。

Answer 1

問得好...

曾與這個戲，我覺得我已經破解它，希望意見纔有意義。

有一個事件發生在我用過的magellanupdate.zf.magellan。這在鼠標滾動上非常火。

由於麥哲倫增加了一個active類，當前活動錨點我得到這個元素，並將其與存儲的lastActive變量進行比較。如果他們不同，那麼該部分已更新。

然後我檢查當前的活動錨是否是子菜單的子項，如果沒有，我關閉所有打開的菜單。如果它是一個孩子，我打開它的父母。

您可以打開和使用上Accordion docs page

這種方法依賴於類描述的方法接近手風琴菜單，所以它可能不適合您的設置工作。如果使用深度鏈接，則可以使用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>