Adding class in jquery

Question

I have this below code that loads a tree menu:

    $(document).ready(function () {
    $(".treeview li>ul").css('display', 'none'); // Hide all 2-level ul
    $(".Treeviewcollapsible").click(function (e) {
        e.preventDefault();
        $(this).toggleClass("Treeviewcollapse Treeviewexpand");
        $(this).closest('li').children('ul').slideToggle();
    });
});

it renders a bunch of html links like

<a url... </a>

But i need it to render them with an anchor class for all levels so something like

<a class="menu" url.... </a>

Can someone please help with that?

I want to then use the below, or join the below with the top to load a partial page without reloading the rest to maintain the tree menu state

$(document).ready(function(){
$("a.menu").click(function(e){
  e.preventDefaul(); // prevent default link button redirect behaviour
  var url=$(this).attr("href");
  $('#page-content').load(url);
 });
});

EDIT

found where the html was rendering and put it in there, sorry obvious solution but new to this!

You want to add class "menu" to <a> but in your selector you are trying to select $("ul.menu a"), "ul" with class "menu". Do you want to change the description in your post? — wonderbell
– wonderbell, Commented Apr 2, 2015 at 20:40

Alex Neigher · Accepted Answer · 2015-04-02 23:37:44Z

1

replace your line that looks like this:

$(this).closest('li').children('ul').slideToggle();

with a line that looks like this

$(this).closest('li').children('ul').addClass('menu').slideToggle();

This new section finds the closest li, goes into the ul that is a child element of that li, finds all the anchor tags( find('a') ), adds a class to all of those, the end() resets the query back to the children('ul'), and then performs the slideToggle

edited Apr 2, 2015 at 23:37

answered Apr 2, 2015 at 20:35

Alex Neigher

9071 gold badge10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JQuery Over a year ago

Thank you! I'll give this a go. I found when I used the bottom Jquery scrip with action links that it worked to render a partial page but it stopped the links from working to click others. Can you see any obvious reason why?

Alex Neigher Over a year ago

want to give it another try? I edited the jquery so that it would add the menu class onto the UL rather than the a tags within them. I think i misread your original request.

Alex Neigher Over a year ago

i also noticed you have menu as a class on both your anchor tags, as well as your ul.menu in your click handler. Which is supposed to have the class added to it? The click handler will only fire if you click on a link within a ul that has a class of menu. Possibly edit your .click selector?

Collectives™ on Stack Overflow

Adding class in jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related