Databases
StackOverflow2013
Postsdbo
PODropDown menu closing problems
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODropDown menu closing problems
    text
    copied!<p>I've created this drop down menu that works on click, but the first drop box stays open when you click on the next link. Also how do you close the menu when a child is clicked as I'm pulling the content from a database and the page does not refresh.</p> <pre><code> $(document).ready(function(){ $("#top-nav li").toggle(function(){ $("ul",this).show(); $("a.top-nav-link", this).addClass('selected'); }, function(){$('ul',this).hide(); $("a.top-nav-link", this).removeClass('selected'); }); }); &lt;ul id="top-nav"&gt; &lt;li&gt; &lt;a href="#" class="top-nav-link"&gt;INDIAN&lt;/a&gt; &lt;ul&gt; &lt;li&gt; &lt;div class=" one-wrap set-column"&gt; &lt;a href="#" &gt;INDIAN&lt;/a&gt; &lt;a href="#" &gt;CHINESE&lt;/a&gt; &lt;a href="#" &gt;ITALIAN&lt;/a&gt; &lt;a href="#" &gt;PUB FOOD&lt;/a&gt; &lt;a href="#" &gt;&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#" class="top-nav-link"&gt;CHINESE&lt;/a&gt; &lt;ul&gt; &lt;li&gt; &lt;div class=" two-wrap set-column"&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;a href="#" &gt;Menu&lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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