0

我正在使用 Jquery 来控制嵌套下拉菜单的 css3 过渡（边距）动画。我可以在单击触发菜单主要部分中的事件的链接时将嵌套菜单下拉，然后如果我再次单击相同的触发器，它将关闭它应该执行的下拉菜单。但是，如果我单击所有下拉触发器，所有下拉菜单都同时可见。

我所追求的是，​​当我单击同一主菜单中的另一个下拉触发器时，如果其中一个下拉菜单已经打开，则打开的下拉菜单将在新的下拉菜单打开时使用 Jquery 控制的 css3 转换关闭。所以一次只能打开一个下拉菜单。

我是 jquery 的新手，我知道下面的 jquery 不是最好的方法。非常感谢任何正确方向的指导。

查询：

$(function() {  
    $("#drop1").click(function() {  
        $(".sub1").toggleClass("submenu");
    });  
});

$(function() {  
    $("#drop2").click(function() {  
        $(".sub2").toggleClass("submenu");
    });  
});

$(function() {  
    $("#drop3").click(function() {  
        $(".sub3").toggleClass("submenu");
    });  
});

CSS：

ul {width:100%; list-style: none; display:block;}

ul li {display:inline-block; width: 20%; height: 40px; float:left; background: #ccc; text-align:center;}

ul li a {display:block; width:100%; height: 40px; position:relative;}

.sub1, .sub2, .sub3 {width:300px; margin: -40px 0 0 0; position:absolute; z-index:-1;
transition: margin 0.2s ease; 
-moz-transition: margin 0.2s ease; 
-webkit-transition: margin 0.2s ease;
-o-transition: margin 0.2s ease;
-ms-transition: margin 0.2s ease;}

.submenu {margin:0; background: #666;}

.sub1 li, .sub2 li, .sub3 li {text-align:center; width: 33%;}

HTML：

<ul>
    <li>normal</li>
    <li><a id="drop1" href="#">drop</a>
        <ul class="sub1">
            <li>drop</li>
            <li>drop</li>
            <li>drop</li>
        </ul>
    </li>
    <li><a id="drop2" href="#">drop</a>
        <ul class="sub2">
            <li>drop</li>
            <li>drop</li>
            <li>drop</li>
        </ul>
    </li>
    <li>normal</li>
    <li><a id="drop3" href="#">drop</a>
        <ul class="sub3">
            <li>drop</li>
            <li>drop</li>
            <li>drop</li>
        </ul>
    </li>
</ul>
4

1 回答 1

0

我会选择一个更简单的解决方案，我希望它可以帮助你（我已经测试过了）。

您将需要更改一些代码，以使激活下拉列表的链接成为同一类的所有成员，在这种情况下drop。例如：

<a id="drop1" href="#" class="drop">drop</a>

您应该对所有下拉选择器（#drop1、#drop2、#drop3）执行此操作。

然后使用这个函数：

$(function() {  
    $("a.drop").click(function() {  
    $('.submenu').not( $(this).next() ).toggleClass("submenu");
        $(this).next().toggleClass("submenu");
    });  
});

这将做的是：

  1. 检查是否已经存在子菜单，以及该子菜单是否不是我们正在单击的当前菜单。这会再次切换（禁用子菜单）每个不是我们单击的元素（因为将在下一行切换）。这是在函数的第一行进行的。
  2. 然后，它将切换当前单击元素的类。

我们需要这两行，因为菜单的状态是没有任何元素显示其子菜单。

在这种$(this).next()情况下使用 是因为您的子菜单是单击的子菜单的下一个元素；换句话说，它就在激活点击之后。

于 2013-01-08T14:04:41.253 回答