Question

我有一个下拉菜单，这是HTML：

<ul>
    <li class="foo"><a>Menu1</a>
        <ul>
             <li>Cosas
             <li>Cosas
             <li>Cosas
        </ul>

     <li><a>Menu2</a>
        <ul>
             <li>Cosas
             <li>Cosas
             <li>Cosas
        </ul>

     <li><a>Menu3</a>
        <ul>
             <li>Cosas
             <li>Cosas
             <li>Cosas
        </ul>
</ul>

预期的行为：单击任何元素时必须打开菜单。单击另一个元素时，它必须关闭上一个打开的元素，然后打开新元素。但是，根据分辨率，它看起来也不同：

移动：.foo元素必须关闭
桌面：.foo项必须是开放的，但保持开/关行为。

这是css：

ul li:nth-of-type(1) {background:pink}
ul li:nth-of-type(2) {background:gold}
ul li:nth-of-type(3) {background:aqua}
ul li ul li {background:white!important}
ul li ul {display:none}
ul li.foo ul {display:block}
ul li.on ul {display:block} 
ul li.foo.on ul {display:none}
@media only screen and (max-width: 320px) {
    ul li.foo ul {display:none}
    ul li.foo.on ul {display:block}
}

我有一个有效打开/关闭菜单的jQuery，但我不能让它关闭已打开的项目：

$("ul li a").click(function () {
        $(this).parent().toggleClass('on');
$("li.on").not('$(this).parent()','.foo').removeClass('on');    

});

如果我删除.not()中的第二个值，它会正常关闭，但当尝试打开第二个或第三个菜单时，第一个菜单也会打开。

如果它有帮助，这是一个小提琴：http://jsfiddle.net/b7hkLrL4/3/

Answer 1

好的，没有手风琴，我发现了你的错误，请查看这个工作解决方案的jsfiddle ;）

http://jsfiddle.net/b7hkLrL4/4/

问题是：

<ul>
    <li class="foo"><a>Menu1</a>

必须是

<ul class="foo">
    <li><a>Menu1</a>

编辑：为了让您对桌面/移动设备采取不同的行为，请尝试以下方法：

$( document ).ready(function() {
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
      //We are mobile
  } else {
      $(".foo li").first().toggleClass('on');
  }
}

此致

根据媒体查询反转jQuery下拉列表的行为

1 个答案: