Databases
StackOverflow2013
Postsdbo
POJQuery addClass() on Click Event
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery addClass() on Click Event
    text
    copied!<p>I am attempting to build a Jquery/CSS drop down menu and things have been going pretty good so far. I'm pretty new to JQuery and I get it most of the time - however, I cannot figure out what I am doing wrong here.</p> <p>I am attempting to change the class of one of the drop-down tabs when it is clicked, but it doesn't appear to be working as expected.</p> <p>You can see the code I have so far over here: <a href="http://jsfiddle.net/utdream/NZJXq/" rel="nofollow">http://jsfiddle.net/utdream/NZJXq/</a></p> <p>I have the class "selected" looking how I want the button to look when a button is clicked on, but I cannot seem to make it so the "selected" class is applied on a click event. In theory, this:</p> <pre><code>&lt;li id="menuProducts"&gt;&lt;a href="#" class="hasmore"&gt;Products&lt;/a&gt; &lt;div id="ProductsMenu"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Submenu Item&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Submenu Item&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/li&gt; </code></pre> <p>Should change this this on a click event:</p> <pre><code>&lt;li id="menuProducts"&gt;&lt;a href="#" class="selected"&gt;Products&lt;/a&gt; &lt;div id="ProductsMenu"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Submenu Item&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Submenu Item&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/li&gt; </code></pre> <p>And this is my current jQuery (which doesn't work):</p> <pre><code>jQuery(document).ready(function () { $('#menuProducts a:first').on('click', function () { $("a:first").removeClass("hasmore"); $("a:first").addClass("selected"); menuSubCloseAll.call(this, 'menuProducts'); $('#menuProducts').find('li').slideToggle(200); }); }); </code></pre> <p>I've tried rewriting this code in many,many different ways and I'm running out of ideas on what I could be doing wrong.</p> <p>Anyone out there have any pointers on what I could do to fix this?</p> <p>Thank you in advance!!</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