Databases
StackOverflow2013
Postsdbo
POJquery hide mega dropdown
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery hide mega dropdown
    primarykey
    data
    text
    <p>I'm trying to build a mega dropdown navbar. Jquery is not a strong point of mine but I need to use it to achieve what I'm looking for. I'm aware of the various topics on similar questions but none of them did exactly what I'm looking for(Remember I'm not a pro in JQuery and I'm only gonna use it for this smaal piece of my site).</p> <p>So far I hav this HTML Layout:</p> <pre><code>&lt;div class = "header-wrapper"&gt; &lt;div class = "header"&gt; &lt;ul id = "navbar"&gt; &lt;li class = "toggle"&gt;Navbar Option 1 &lt;ul class = "dropdown"&gt; &lt;li class = "dropdown-inner"&gt; Dropdown 1 &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class = "toggle"&gt;Navbar Option 2 &lt;ul class = "dropdown"&gt; &lt;li class = "dropdown-inner test"&gt; Dropdown 2 &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>This is my JQuery:</p> <pre><code>&lt;script type="text/javascript"&gt; window.onload = function(){ var $dd = $(".dropdown"); $('.toggle').click(function() { $('.toggle').not(this).children('ul').slideUp("slow"); $(this).children('ul').slideToggle("slow"); }); /* Don't hide the dropdown when clicking inside */ $dd.on("click", function(evt) { evt.stopPropagation(); }); } &lt;/script&gt; </code></pre> <p>My .dropdown div does show and hide as intended. But what I need is to add a function that hides the dropdown if clicked outside of it. Now I can listen to a click event on the document but then a click on my .toggle Navbar options doesn't work either.</p> <p>Thus, I want to keep the .toggle link functional and have it so that you can click inside the .dropdown ul without it closing but if you click anywhere else on the page the .dropdown should .slideUp("slow").</p> <p>Any help? Thank you.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USHerm
    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.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJquery hide mega dropdown
      1. This table or related slice is empty.
      1. VTUpMod
    1. COYou can use [jquery event.target](http://api.jquery.com/event.target/) to check what initiated that event and can work accordingly..
      singulars
      1. POJquery hide mega dropdown
      1. USDeadlock
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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