Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>If I understand your question correctly, the problem is that you need to call the init function to redraw all, but at the same time you set there item1 as current; and this is not ok if you have just pressed link2.</p> <p>If think that your solution should be to almost remove all the init code. All this can be done in the css styles, simplifying a lot your code. </p> <p>you set active to items. (You are already doing this in the anchors, do it in the li). Then, put all the appearance styles inn the css, and your script is reduced.</p> <p>don't need to set active on subitems. you can set rules like li.active li; that is, the li that is descendant of the active li.</p> <p>Once you do all this, you can avoid the init funcion altogether.</p> <p><strong>Added fiddle</strong></p> <p>I have changed that in the updated <a href="http://jsfiddle.net/3ZRZz/6/" rel="noreferrer">fiddle</a></p> <p>I am marking the visible item menu 'current', I find 'active' confusing for a class name. It must be in the li and not in the, so that it can affect the second level lis</p> <p>Now the script is just </p> <pre><code>$(document).ready(function() { $("#menu_item ul.menu li.expanded").mouseover(function(){ var previous = $('.current'); previous.removeClass('current'); $(this).addClass('current'); }); }); </code></pre> <p>I am just removing current from the previous current element, and adding it to the new one.</p> <p>The initial selection is just in the markup</p> <pre><code>&lt;div id="menu_item"&gt; &lt;ul class="menu"&gt; &lt;li class="expanded first current"&gt; &lt;a href="#" title=""&gt;Item1&lt;/a&gt; </code></pre> <p>And the new css rules are:</p> <pre><code>#menu_item &gt; ul.menu &gt; li.current { background-color: orange; } #menu_item ul.menu li ul { display: none; } #menu_item ul.menu li.current ul { display: block; } </code></pre>
    singulars
    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.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      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