取决于媒体查询的 jQuery 下拉列表的反转行为

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');
  }
}

问候