如何让我的 jQuery 代码适用于所有元素

Question

I have this accordion menu but it only works on the first ul . How do I get it to work on all ul like this? If you could explain what I'm doing wrong so I know in the future that would be great.

Also, how do I get it so that the link toggles between two classes, right and down each time it is clicked? It also has the class turq-font on it. I want the right to be removed and replaced with down when the link is clicked and the menu is showing. Heres my code:

 $(function() { $("#show-menu").click(function() { $("#sub-menu-acc").toggleClass("active-menu", 1000); }); });

 .active-menu { display: block !important; } .admin-area ul li { margin: 6px 0px; } .admin-right-menu ul li a { color: black; text-decoration: none; } .admin-area ul { list-style: none; margin-bottom: 20px; } .admin-area ul li ul { display: none; padding-left: 20px; margin-bottom: 0px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="admin-area"> <div class="admin-right-menu"> <ul> <li><a href="#" id="show-menu" class="turq-font right">Stats ></a> <ul id="sub-menu-acc"> <li><a href="#">Business Stats</a> </li> <li><a href="#">Affiliate stats</a> </li> </ul> </li> <li><a href="#" id="show-menu" class="turq-font right">Reports ></a> <ul id="sub-menu-acc"> <li><a href="#">Global</a> </li> <li><a href="#">Sales</a> </li> <li><a href="#">Sales trends</a> </li> </ul> </li> </ul> </div></div>

Answer 1

The issue is due to your use of repeated id attributes; they should be unique within a document . Convert your code to use classes instead.

Also note that you should use the this keyword to traverse the DOM to find the ul related to the clicked a element, and the addition of right down in a toggleClass() call. Try this:

 $(function() { $(".show-menu").click(function(e) { e.preventDefault(); // stop the '#' of the clicked a appearing in the URL $(this).toggleClass('right down').next(".sub-menu-acc").toggleClass("active-menu"); }); });

 .active-menu { display: block !important; } .admin-area ul li { margin: 6px 0px; } .admin-right-menu ul li a { color: black; text-decoration: none; } .admin-area ul { list-style: none; margin-bottom: 20px; } .admin-area ul li ul { display: none; padding-left: 20px; margin-bottom: 0px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="admin-area"> <ul> <li> <a href="#" class="show-menu turq-font right">Stats ></a> <ul class="sub-menu-acc"> <li> <a href="#">Business Stats</a> </li> <li> <a href="#">Affiliate stats</a> </li> </ul> </li> <li> <a href="#" class="show-menu turq-font right">Reports ></a> <ul class="sub-menu-acc"> <li> <a href="#">Global</a> </li> <li> <a href="#">Sales</a> </li> <li> <a href="#">Sales trends</a> </li> </ul> </li> </ul> </div>