Question

我正在使用jquery创建多级菜单。当我点击给定级别的按钮时，我更改按钮颜色，然后显示单击按钮的下一个菜单级别。

例如，点击“政策”可能会显示“新政策”，“续订政策”，“支持政策”等。

“策略”按钮位于1级，其他位于2级。如果我单击另一个1级按钮，我将关闭（删除）所有按钮的按钮颜色类，但单击按钮除外。对于这个按钮，我切换按钮颜色类（如果它被点击或第二次点击）。

1）当我点击第二级按钮时，问题出现了所有级别按钮的颜色类都被删除了。所以现在我想把type =“level01”和type =“level02”用于不同级别的按钮。（我把它们称为按钮，但它们实际上是锚标签。）

这是我的代码，除了当前按钮的颜色类：

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

请注意，按钮上的文本（锚标记的innerHTML）也在name =“”参数中。

现在我想说一下：

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

但我在jquery中找不到如何正确地'和'这两个条件。

2）我在

中的$（this）上使用text（）函数

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

因为锚标记的innerHTML在文本中附加了一个小图形。所以这适用于长度小于19个字符的文本长度，但从那里测试失败??

有人可以帮忙吗？

克里斯

Answer 1

进一步更新：工作演示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();
        }
    });
});

更新：要将多个属性（非）-equals选择器链接在一起，只需将它们连接起来（see jQuery docs）。

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

特别是在你的情况下，这可能仍然没有必要：

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

<小时/> 完成选择后，您可以使用jquery .not()过滤器方法从匹配的集合中删除当前元素：

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

这是做到这一点的方法。

作为如何让你的尝试工作的一个例子（尽管不推荐这个）：

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

您需要将$(this).text()的结果包装在字符串中的文字引号中，因为它包含空格。这应该是唯一的语法问题，尽管.not()过滤器是最安全，最直观的方法。

使用jquery测试条件m和条件n

1 个答案: