Note that there are some explanatory texts on larger screens.

plurals
  1. POClose toggle menu on click
    primarykey
    data
    text
    <p>I have a toggle menu for mobile. What I need is - when a user clicks on a menu item I need the toggle menu to close.</p> <p>jQuery:</p> <pre><code>$(".nav-button").click(function () { $(".nav-button,.primary-nav").toggleClass("open"); }); </code></pre> <p>HTML:</p> <pre><code>&lt;button class="nav-button"&gt;Toggle Navigation&lt;/button&gt; &lt;nav id="mobile-nav"&gt; &lt;ul class="primary-nav"&gt; &lt;li class="current"&gt;&lt;a class="scroll-link" href="#home"&gt;text&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="scroll-link" href="#tab2"&gt;text&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="scroll-link" href="#tab3"&gt;text&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="scroll-link" href="#tab4"&gt;{text&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="scroll-link" href="#tab5"&gt;{text&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="scroll-link" href="#tab6"&gt;{text&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; </code></pre> <p>Any help would be greatly appreciated, thanks</p> <p><strong>UPDATE</strong></p> <p>Thanks for all the answers, but none of them achieved what i want, i know my first question was a little rubbish !</p> <p>the main reason is the site i`am doing is a parallax scroller , so i want the toggle menu to close when a menu item is clicked so the user can see the parallax effect instead of seeing a static menu</p> <p>I have come up with a solution that closes the toggle menu when a user clicks on a menu item</p> <p>the problem is the menu will then not open when i click the toggle button after the menu item has been clicked</p> <p>is there a way to default back to the original open class once the menu item has been clicked and the menu has closed</p> <pre><code>$(".nav-button").click(function () { $(".nav-button,.primary-nav").toggleClass("open"); }); $(".scroll-link").click(function () $(".nav-button,.primary-nav").toggleClass("close"); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload