Question

练习一些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>

$('.menu').keydown(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
    $('ul.subMenu').toggleClass('show');
}
});

Answer 1

将$('ul.subMenu')更改为$(this).children('ul.subMenu')。这将仅搜索与ul.subMenu选择器匹配的当前元素（不是所有元素）的子元素（根据需要）。

有关详细信息，请参阅jQuery children([selector])函数。

Answer 2

您可以使用此代码..

<!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>

Answer 3

我正在做的是定义一个CSS类.collapse，以便在当前关注的ul内使用类.subMenu折叠每个li。在脚本中，函数使用类选择器绑定到li，使用.collapse切换（添加或删除）类ul。

$('.menu').keyup(function(e){ 
    var keyCode = e.keyCode ? e.keyCode : e.which;   
    if(keyCode==13){
        $(this).find('ul.subMenu').toggleClass('collapse');
    }
});

.collapse{
  height:0;  
  overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
  <li class="menu" autofocus><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>

从输入键切换菜单个别列表

3 个答案: