Question

我希望仅在.hover()类#sidebar-wrapper时才使用jQuery #page-wrapper toggled-2事件。

<div id="page-wrapper" class="toggled-2">

  <!-- Sidebar -->
  <div id="sidebar-wrapper">

    <ul class="sidebar-nav nav-pills nav-stacked" id="menu">
      <li id="organisation"><a href="/organisation"><span class="menu-icon-stack glyphicon glyphicon-pencil" aria-hidden="true"></span>Select Business</a></li>
      <li>....</li>
      <li class="active">
         <ul class="sidebar-nav nav-stacked sub-nav nav-list">
             <li>....</li>
             <li class="sub-active">Active menu item</li>
             <li>....</li>
         </ul>
      </li>
    </ul>

   </div>
 </div>

我最近的jQuery尝试是这样的（没有错误，但没有执行）：

$("#page-wrapper.toggled-2 #sidebar-wrapper").hover(
    function() {
        alert("hover active!");
    },
    function() {
        alert("hover off!");
    }
);

此代码执行警报，但在目标中并不具体，因此当toggled-2类尚未应用于#page-wrapper时，它也会触发警报：

$("#sidebar-wrapper").hover(
    function() {
        alert("hover active!");
    },
    function() {
        alert("hover off!");
    }
);

感谢您的帮助

Answer 1

将您的事件绑定到＃sidebar-wrapper但有条件地检查父级（＃page-wrapper）以查看它是否具有所需的类。

$("#sidebar-wrapper").hover(function() {
    if($(this).parent().hasClass("toggled-2")) {
        alert("Hover active!");
    }
});

Answer 2

我会尝试：

$("div#page-wrapper.toggled-2 > #sidebar-wrapper").hover(
    function() {
        console.log("hover active!");
    },
    function() {
        console.log("hover off!");
    }
);

或者

$("div#page-wrapper.toggled-2").find("#sidebar-wrapper").hover(
    function() {
        console.log("hover active!");
    },
    function() {
        console.log("hover off!");
    }
);

这应该更具体。你的第二段代码会在div悬停的任何时候执行。

使用jQuery悬停的特定定位不起作用

2 个答案: