Javascript 按enter键切换菜单单个列表_Javascript_Jquery_Css

Javascript 按enter键切换菜单单个列表

javascript jquery css

Javascript 按enter键切换菜单单个列表,javascript,jquery,css,Javascript,Jquery,Css,在练习Jquery时，我有一个简单的无序列表，我想在按enter键时展开它。但只有我按下回车键的那一个，不是所有的。可能是设置错误。目前它正在扩大这两个项目 <nav> <ul> <li class="menu"><a href="#">Menu 1</a> <ul class="subMenu"> <li> <a href="">Sub Menu 1</

在练习Jquery时，我有一个简单的无序列表，我想在按enter键时展开它。但只有我按下回车键的那一个，不是所有的。可能是设置错误。目前它正在扩大这两个项目

<nav>
<ul>
  <li class="menu"><a href="#">Menu 1</a>
    <ul class="subMenu">
      <li>
        <a href="">Sub Menu 1</a>
      </li>
    </ul>
  </li>
  <li class="menu"><a href="#">Menu 2</a>
    <ul class="subMenu">
      <li>
        <a href="">Sub Menu 1</a>
      </li>
      <li>
        <a href="">Sub Menu 2</a>
      </li>
    </ul>
  </li>
</ul>

将

$（'ul.子菜单'）

更改为

$（this）.children（'ul.子菜单'）

。这将只搜索与

ul.子菜单

选择器（根据需要）匹配的当前元素的子元素（不是全部）

有关更多信息，请参阅jQuery函数。

您可以使用此代码。

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Demo</title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
              $('.menu').on("click",function(){
                $(this).find(".subMenu").toggle();
                $(this).siblings().find(".subMenu").hide();
              });
            });

        </script>

    </head>
    <body>
        <div class="container">
           <nav>
            <ul>
              <li class="menu "><a href="#">Menu 1</a>
                <ul class="subMenu">
                  <li>
                    <a href="">Sub Menu 1</a>
                  </li>
                </ul>
              </li>
              <li class="menu"><a href="#">Menu 2</a>
                <ul class="subMenu">
                  <li>
                    <a href="">Sub Menu 1</a>
                  </li>
                  <li>
                    <a href="">Sub Menu 2</a>
                  </li>
                </ul>
              </li>
            </ul>
            </nav>
        </div>
    </body>
</html>


引导演示
$（文档）.ready（函数（）{
$（'.menu'）。打开（“单击”，函数（）{
$（this.find（“.subMenu”）.toggle（）；
$（this.sides（）.find（“.subMenu”）.hide（）；
});
});

我现在做的是定义一个CSS类

。collapse

用class

折叠每个ul
。子菜单在当前关注的li
中。在脚本中，使用类选择器将一个函数绑定到li
，该选择器使用ul
s切换（添加或删除）类.collapse。
$（'.menu'）.keyup（函数（e）{
var-keyCode=e.keyCode？e.keyCode:e.which；
如果（键代码==13）{
$（this.find（'ul.subMenu'）.toggleClass（'collapse'）；
}
});
。折叠{
身高：0；
溢出：隐藏；
}
















这是一个完美且易于修复的解决方案。感谢you@DanielRubio我很高兴我帮了忙！确保接受此答案（勾选此答案左边的绿色复选标记），向社区表明它解决了您的问题！现在，如果我想在打开第二个菜单列表时关闭第一个菜单列表，我是否需要进行不同的设置，是否使用addClass而不是toggle。
<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Demo</title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
              $('.menu').on("click",function(){
                $(this).find(".subMenu").toggle();
                $(this).siblings().find(".subMenu").hide();
              });
            });

        </script>

    </head>
    <body>
        <div class="container">
           <nav>
            <ul>
              <li class="menu "><a href="#">Menu 1</a>
                <ul class="subMenu">
                  <li>
                    <a href="">Sub Menu 1</a>
                  </li>
                </ul>
              </li>
              <li class="menu"><a href="#">Menu 2</a>
                <ul class="subMenu">
                  <li>
                    <a href="">Sub Menu 1</a>
                  </li>
                  <li>
                    <a href="">Sub Menu 2</a>
                  </li>
                </ul>
              </li>
            </ul>
            </nav>
        </div>
    </body>
</html>