0

我正在使用 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 个字符的文本长度，但从那里测试失败？

有人可以帮忙吗？

克里斯

4

1 回答 1

0

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


更新：要将多个属性（不）等于选择器链接在一起，只需将它们连接起来（参见 jQuery 文档）。

$(".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()过滤器再次是解决这个问题的最安全和最直观的方法。

于 2012-07-17T00:10:43.113 回答