Question

我试图通过jQuery控制两级菜单栏。问题是我的mouseenter事件没有被触发。

这是我的HTML：

<ul class="top-level-menu">
        <li>Employees
            <ul class="second-level-menu">
                <li>Add new employee</li>
                <li>Edit employee details</li>
            </ul>
        </li>

        <li>Attendance
            <ul class="second-level-menu">
                <li>View report</li>
                <li>Upload attendance</li>
            </ul>

        </li>

        <li>Broadcast</li>
        <li>Log out</li>
    </ul>

和jQuery：

<script>
        $(document).ready(function(){

            $('.second-level-menu').hide();
            console.log("Hidden!\n");

            $('.first-level-menu').mouseenter(function(){
                console.log("Mouse enter\n");
                $(".second-level-menu", this).show();
            });

            $(".first-level-menu").mouseleave(function(){
                $(".second-level-menu", this).hide();
            });
        });
    </script>

截至目前还没有CSS。现在，我得到了＃34; Hidden！＆＃34;控制台上的消息，显示脚本被调用，但当我将鼠标移动到顶级项目时没有任何反应。

出了什么问题？

Answer 1

<body>
<ul class="top-level-menu">
        <li class="first-level-menu">Employees
            <ul class="second-level-menu">
                <li>Add new employee</li>
                <li>Edit employee details</li>
            </ul>
        </li>

        <li>Attendance
            <ul class="second-level-menu">
                <li>View report</li>
                <li>Upload attendance</li>
            </ul>

        </li>

        <li>Broadcast</li>
        <li>Log out</li>
    </ul>
<script type="text/javascript">
$(document).ready(function(){

            $('.second-level-menu').hide();
            console.log("Hidden!\n");

            $('.first-level-menu').mouseenter(function(){
                console.log("Mouse enter\n");
                $(".second-level-menu", this).show();
            });

            $(".first-level-menu").mouseleave(function(){
                $(".second-level-menu", this).hide();
            });
        });
</script>
</body>

你的html中没有第一级菜单。所以mouseenter和mouseleave不起作用。我已经发布了一个工作代码示例

Answer 2

HTML代码中不存在

first-level-menu类。将其添加到ul元素：

<ul class="top-level-menu first-level-menu">...</ul>

选择器中有另一个修复：选择li元素而不是ul：

$('.first-level-menu li').mouseenter(function () {
    console.log("Mouse enter\n");
    $(".second-level-menu", this).show();
});

this将成为列表元素。

$(document).ready(function() {

  $('.second-level-menu').hide();
  console.log("Hidden!\n");

  $('.first-level-menu li').mouseenter(function() {
    console.log("Mouse enter\n");
    $(".second-level-menu", this).show();
  });

  $(".first-level-menu li").mouseleave(function() {
    $(".second-level-menu", this).hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="top-level-menu first-level-menu">
  <li>Employees
    <ul class="second-level-menu">
      <li>Add new employee</li>
      <li>Edit employee details</li>
    </ul>
  </li>
  <li>Attendance
    <ul class="second-level-menu">
      <li>View report</li>
      <li>Upload attendance</li>
    </ul>
  </li>
  <li>Broadcast</li>
  <li>Log out</li>
</ul>

用于射击的Mouseenter事件

2 个答案: