Jak mogę zamknąć menu górnego paska Fundacji po kliknięciu łącza?

Question

Używam stałego paska Top Fundacji Zurb na mojej stronie pojedynczej strony i zawiera linki zakotwiczeń do miejsc na stronie. Chciałbym, aby po kliknięciu linku wewnątrz rozwiniętego menu mobilnego menu się zamknęło.

Obecnie po kliknięciu łącza strona przewija się, ale menu jest otwarte u góry strony poza widokiem.

W poprzedniej wersji Foundation udało mi się odwrócić kod i znaleźć proste rozwiązanie. Od aktualizacji do wersji 4.3.1, aby naprawić inny problem z górnym pasku, nie jestem w stanie znaleźć rozwiązania z powodu mojej ograniczonej znajomości javascript.

topbar

Wydaje mi się, że gdybym mógł ognia zdarzenie lub funkcję zamykania menu kiedy link w menu kliknięciu, to będzie naprawione. Wcześniej umieszczałem kod, który się wydarzył na linku, kliknij w wiersz 261.

Po zamknięciu menu telefonu komórkowego, pozycja .fixed jest dodawana do elementu div otaczającego pasek górny, a .rozszerzona i .fixed są usuwane z podzbioru .topbar .

Answer 1

Można spróbować dodać trochę jQuery aby zwinąć menu po kliknięciu na link.

Możesz dodać kod zawinięty wewnątrz elementu skryptu. Umieść go po wszystkich elementach HTML (wewnątrz elementu body). Możesz również umieścić go w osobnym pliku javascript, który możesz pobrać tak jak każdy inny plik javascript. Upewnij się, że umieściłeś ten link po łączu jquery.

Sam kod może być całkiem prosty, ponieważ wygląda na to, że podstawa dodaje klasę o nazwie "rozwinięta" do paska nawigacji po włączeniu i wyłączeniu ikony menu. Możesz więc usunąć "rozwiniętą" klasę, gdy ktoś kliknie na twoje przyciski.

To właśnie ona powinna wyglądać następująco:

jQuery(document).ready(function($) { 
    $('.top-bar ul.right(or .left depending how you arranged your buttons) li').click(function() { 
     $('.top-bar').removeClass('expanded'); 
    }); 
}(jQuery)); 

Selektor „.TOP-bar ul.right (lub .left zależności jak ułożone przycisków) li” może być wywołana z id Także jeśli nadajesz swojemu menu (elementowi ul) unikalny identyfikator. W takim przypadku będzie to:

jQuery(document).ready(function($) { 
    $('#myMenuId li').click(function() { 
     $('.top-bar').removeClass('expanded'); 
    }); 
}(jQuery)); 

Nadzieję, że pomaga.

Answer 2

Spróbuj:

$('#main-menu li').click(function() { 
    $('.toggle-topbar').trigger('click'); 
}); 

Answer 3

Czystsze sposób (zamiast spustu kliknięcie lub usunąć klasa):

$(document).on("click", ".top-bar li", function() { 
    Foundation.libs.topbar.toggle($('.top-bar')); 
}); 

Answer 4

To, co działa dla mnie:

setTimeout(function() {$(document).foundation('topbar', 'reflow')}, 500); 

Daj mi znać, jeśli działa dla Ciebie. (Może zmniejszyć "500" do czasu krótszego niż pół sekundy).

Oto rozszerzona wersja:

<script type="text/javascript"> 
function hideDropDown() { 
    setTimeout(function() {$(document).foundation('topbar', 'reflow')}, 500); 
} 
</script> 
<nav class="top-bar" data-topbar role="navigation"> 
    <section class="top-bar-section"> 
    <!-- Right Nav Section --> 
    <ul class="right"> 
     <li class="has-dropdown"> 
     <a href="#">My menu</a> 
     <ul class="dropdown"> 
      <li><a onclick="hideDropDown()" target="another_page" href="/some/where">Menu item</a></li> 
     </ul> 
     </li> 
    </ul> 
    </section> 
</nav> 

Answer 5

pracuję z Fundacji 6 po raz pierwszy, i natknąłem się na to stanowisko, próbując wymyślić sposób, aby zamknąć nowe menu top-bar na mobilny po kliknięciu linku.Chciałem skomentować moje rozwiązanie na wypadek, gdyby ktoś inny pracujący na fundacji 6 działał w tym poście, ponieważ był to dobry punkt wyjścia dla mnie.

Oto co zrobiłem:

setup Nawigacja - poziome nav na średnich i dużych pułapki, reaguje przełącznik pionowej nav na małe przerwania

   <!-- Mobile responsive toggle (hamburger menu) --> 
       <div class="title-bar" data-responsive-toggle="siteNav" data-hide-for="medium"> 
        <button class="menu-icon" type="button" data-toggle></button> 
        <div class="title-bar-title">Menu</div> 
       </div> 

       <!-- Nav items --> 
       <div id="siteNav" class="top-bar"> 
        <p><ul class="vertical medium-horizontal menu text-center"> 
         <li ><a href="#home" onClick="">HOME</a></li> 
         <li ><a href="#services">SERVICES</a></li> 
         <li ><a href="#contact">CONTACT</a></li> 
        </ul></p> 
       </div> 

Potem dodałem zmodyfikowaną wersję jQuery oparte na dotychczasowe rozwiązania w tym poście (dzięki amazingBastard i Cerbrus):

$(document).ready(function($) { 
     $('#siteNav li').click(function() { 
      if(Foundation.MediaQuery.current == 'small'){ 
       $('#siteNav').css('display', 'none'); 
      } 
     }); 
    }); 

W Fundacji 6 selektor CSS „display” jest dodawany do rozwinięte menu i ustawione jako "display: none" dla ukrytych lub "display: block" dla rozwiniętych. Ten fragment jquery sprawdza bieżący punkt przerwania względem małego (urządzenia mobilnego) po kliknięciu elementu nawigacji w domyślnej klasie menu, której używam, a jeśli true, zmienia selektor css na "display: none", skutecznie zamykając przełączanie menu.

Answer 6

Skopiowałem część kodu do kodu zamknięcia funkcji rozwijanej Fundacji 6.

Aby pracować miałem też ustawić opcję data-disable-najechania kursorem = "true na element menu w przeciwnym razie nie byłoby zamknąć menu po raz pierwszy użytkownik kliknął element w nim.

pisałam kod w angularjs i uczynił to działa. Zgaduję, że to wyglądać tak dla jQuery. Innymi słowy, kod nie jest testowany.

$('#main-menu li').click(function closeDropdown() { 
    var $toClose = $('#main-menu'); 

    if(!$toClose){ 
     return; 
    } 

    var somethingToClose = $toClose.hasClass('is-active') || $toClose.find('.is-active').length > 0; 

    if (somethingToClose) { 
     $toClose.find('li.is-active').add($toClose).attr({ 
      'aria-expanded': false, 
      'data-is-click': false 
     }).removeClass('is-active'); 

     $toClose.find('ul.js-dropdown-active').attr({ 
      'aria-hidden': true 
     }).removeClass('js-dropdown-active'); 
    } 
    });