Databases
StackOverflow2013
Postsdbo
POExclude a parent element and its children from hide() action
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POExclude a parent element and its children from hide() action
    text
    copied!<p>Im building this menu but I'm having a problem with excluding a parent and its children. I hope to solve this without extra classes.</p> <p>So the way it suppose to work is to click a <code>a.clicked</code> and it <code>.hide()</code> the <code>li elements</code> outside its own <code>li</code> but with in the scope of the <code>ul</code></p> <p>its no problem finding the parent <code>ul</code> and put a class on the <code>li</code> which i do <code>li.active</code>. The hard thing here becomes to exclude all the elements inside the <code>li.active</code>. It do sound messy so i try to comment as best i can in the script.</p> <p>Thanks guys for input</p> <p>EDIT: i done a poor job explaining but like i click <code>level 1 - 1</code>and <code>level 1 - 2</code> is suppose to hide and thats the pattern as we go deeper down the menu with 2 - 1 ect</p> <p>first of here is the <strong>demo:</strong> <a href="http://jsfiddle.net/Abj9u/6/" rel="nofollow">http://jsfiddle.net/Abj9u/6/</a></p> <pre><code>$('.clicked').on('click', function(){ var $this = $(this); //activate this li $this.parent('li:first').addClass('active'); //hide the other level (1)(2)(3)(4)(ect..) li items //is there a way to exlude .active li and its children without adding a class like .sub to the sub li's? $this.parents('ul:first').find('li').not('.active').hide(); //add class to this for style $this.addClass('selected'); //show the sub ul $this.parent().children('ul:first').show(); });​ </code></pre> <p><strong>html</strong></p> <pre><code>&lt;ul id="nav"&gt; &lt;li&gt; &lt;a href="#" class="clicked"&gt;Level 1 - 1&lt;/a&gt; &lt;ul class="hidden"&gt; &lt;li&gt;&lt;a href="#" class="clicked"&gt;Level 2.1 - 1&lt;/a&gt; &lt;ul class="hidden"&gt;&lt;li&gt;&lt;a href="#" class="clicked"&gt;Level 3.1 - 1&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#" class="clicked"&gt;Level 2.2 - 1&lt;/a&gt; &lt;ul class="hidden"&gt;&lt;li&gt;&lt;a href="#" class="clicked"&gt;Level 3.2 - 1&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#" class="clicked"&gt;Level 2.3 - 1&lt;/a&gt; &lt;ul class="hidden"&gt;&lt;li&gt;&lt;a href="#" class="clicked"&gt;Level 3.3 - 1&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#" class="clicked"&gt;Level 1 - 2&lt;/a&gt; &lt;ul class="hidden"&gt; &lt;li&gt;&lt;a href="#" class="clicked"&gt;Level 2.1 - 2&lt;/a&gt; &lt;ul class="hidden"&gt;&lt;li&gt;&lt;a href="#" class="clicked"&gt;Level 3.1 - 2&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#" class="clicked"&gt;Level 2.2 - 2&lt;/a&gt; &lt;ul class="hidden"&gt;&lt;li&gt;&lt;a href="#" class="clicked"&gt;Level 3.2 - 2&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#" class="clicked"&gt;Level 2.3 - 2&lt;/a&gt; &lt;ul class="hidden"&gt;&lt;li&gt;&lt;a href="#" class="clicked"&gt;Level 3.3 - 2&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&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