Databases
StackOverflow2013
Postsdbo
POjQuery hide element on event outside of element
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery hide element on event outside of element
    text
    copied!<p>I've been working on a very simple Jquery script that displays a few mini-dashboards (divs) for users. When someone clicks a link the correct panel is displayed. Very much like Twitter's login panel.</p> <p>My only problem is that when I click outside the panel it closes as expected but when I click inside the panel it still closes anyway.</p> <p>There are other html elements inside each panel and I'm wondering if they're "getting in the way" of the main panel div?</p> <p>account-menu.js</p> <pre><code>(function($){ $.fn.renderDash = function(openDash, fn) { var container = $(this); container.removeClass('no-js'); container.bind('click', function(event){event.preventDefault();clickStart();}) .bind('mouseup', function(event){mouseupDash();}) $(document.body).bind('mouseup', function(event){ // &lt;-- the offending code if ($(openDash).has(this).length == 0) { $(openDash).hide(); } }) function clickStart() {$(openDash).toggle();} function mouseupDash() {return false;} }; })(jQuery); </code></pre> <p>index.html</p> <pre><code>... &lt;script src="jquery-1.4.4.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="account-menu.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $('.panel1-start').renderDash("#panel1"); $('.panel2-start').renderDash("#panel2"); $('.panel3-start').renderDash("#panel3"); }); &lt;/script&gt; ... &lt;/head&gt; &lt;body&gt; ... &lt;ul&gt; &lt;li&gt; &lt;a href="" class="panel1-start"&gt;Panel 1 Link&lt;/a&gt; &lt;ul id="panel1"&gt; &lt;li&gt;Panel 1 Content&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; panel2, panel3, etc... </code></pre> <p>Update: I just added a snippet of the html code. Might make things a bit clearer.</p>
 

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