Question

I am creating muti-level menu using jquery. When I click on a button in a given level I change the buttons colour and I display the next lower menu level for the button clicked.

For example, clicking “Polices” may show “New policy”, “Renew policy”, “Endorse policy” etc.

The “Policies” button is at level 1 and the others are at level 2. If I click another level 1 button I turn off (remove) the button colour class for all buttons except the button being clicked. For this button I toggle the button colour class (in case it’s being clicked off or clicked a second time).

1) The problem comes when I click a level two button in that ALL the level one buttons’ colour class are removed. So now I want to put type=”level01″ and type=”level02″ for the buttons in the different levels. (I call them buttons but they are actually anchor tags.)

This is my code to remove all but the current buttons’ colour class:

// remove the menuA-open class from all class menuA objects except the one being toggled
$(".menuA[name!=" + $(this).text() +"]").removeClass("menuA-open");

Note that the text on the button (the anchor tag’s innerHTML) is also in the name=”” parameter.

Now I want to say something like:

($(".menuA[name!=" + $(this).text() +"]") and $("menu[type]==$(this)[type])).removeClass("menuA-open");

but I’m failing find how to ‘and’ these two conditions correctly in jquery.

2) I use the text() function on $(this) in

$(".menuA[name!=" + $(this).text() +"]").removeClass("menuA-open");

because the anchor tag’s innerHTML has a small graphic appended to the text. So this works fine for text lengths less than 19 characters but from there on the test fails??

Can anyone please help?

Chris

Answer 1

Further Update: Working demo http://jsfiddle.net/Jb2jP/1/

$(document).ready(function() {
    $(".menuA").click(function(evnt) {

        evnt.preventDefault();

        $(".menuA").not(this).removeClass("menuA-open");

        // hide all other fieldset objects except the one being toggled
        $('fieldset').not($(this).next('fieldset')).hide();

        // toggle the fieldset following this link open or closed
        $(this).next('fieldset').toggle();

        // toggle the currently selected menuA-open class on or off
        $(this).toggleClass("menuA-open");
    });

    $("fieldset").mouseup(function() {
        return false;
    });
    $(document).mouseup(function(evnt) {
        // if user clicked anywhere outside our menus
        if ($(evnt.target).parent("a.menuA").length == 0) {
            // remove the menuA-open class from all class menuA objects
            $(".menuA").removeClass("menuA-open");
            // hide all fieldset objects
            $("fieldset").hide();
        }
    });
});​

---

Update: To chain multiple attribute-(not)-equals selectors together, simply concatenate them (see jQuery docs).

$(".menuA[name='abc'][type='123']").removeClass("menuA-open");

Specifically in your case though, this still probably won’t be necessary:

var type = $(this).attr('type');
$(".menuA").not(this).filter("[type='"type"']").removeClass("menuA-open");

---

You can use the jquery .not() filter method to remove the current element from the matched set once you’ve done the selection:

$(".menuA").not(this).removeClass("menuA-open");

That is the way to do it.

---

As an example of how you would get your attempt working (not recommending this at all though):

$(".menuA[name!='" + $(this).text() +"']").removeClass("menuA-open");

You need to wrap the results of $(this).text() in literal quotes within your string, since it contains a space. That should be the only syntactic problem, though again the .not() filter is the safest and most intuitive way to go about this.