javascript - 当鼠标悬停在列表上时展开列表 - css 列表 TreeView

Question

我正在尝试构建多层次的 CSS 基本列表树结构 (UL-Li...)。我已经设法将鼠标悬停在 1 级 li 上，它显示其子 ul-li 并在鼠标悬停时移回其原始位置。但是，它会在级别 1 时删除事件类，即使它有子元素，所以我的问题是我如何绑定(bind)检查鼠标是否在 $this 子元素上而不是悬停到级别 2 等等......

 $(document).ready(function() {

   $('.Nav_tree_wrapper ul li').each(function() {
     if ($(this).children('ul').length > 0) {
       $(this).addClass('parent');
     }
   });

   $(".Nav_tree_wrapper ul li.parent > a").hover(
     function() {
       $(this).parent().toggleClass('active');
       $(this).parent().children('ul').slideToggle('fast');


     }, function() {
       $(this).parent().toggleClass('active');
       $(this).parent().children('ul').slideToggle('fast');
     }
   );
 });

.Nav_tree_wrapper ul {
  list-style: none outside none;
  padding: 20px;
}
.Nav_tree_wrapper ul li ul {
  display: none;
  margin: 0 0 0 12px;
  overflow: hidden;
  padding: 0 0 0 25px;
}
.Nav_tree_wrapper ul li a {
  display: block;
  padding: 15px 10px 15px 15px;
  line-height: 22px;
  position: relative;
  border-bottom: 1px groove #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Nav_tree_wrapper">
  <ul id="treeview" class="nav">
    <li>
      <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/SystemAdministration/Admin_Home">System Administration</a>
    </li>
    <li class="parent">
      <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/SystemCore/SystemCoreHome">System Core</a>

      <ul style="display: none;">

        <li>
          <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c2/a2">f2</a> 
        </li>
        <li class="parent">
          <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c2/a2">f3</a> 
          <ul>
            <li>
              <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c4/a4">f4</a> 
            </li>
            <li>
              <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c5/a5">f5</a> 
            </li>
            <li>
              <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c6/a6">f6</a> 
            </li>
          </ul>
        </li>
        <li class="parent">
          <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c7/a7">f7</a> 
          <ul>
            <li class="parent">
              <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c8/a8">f8</a> 
              <ul>
                <li class="parent">
                  <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c10/a10">f10</a> 
                  <ul>
                    <li>
                      <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c11/a11">f11</a> 
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c9/a9">f9</a> 
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="parent">
      <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/MyControllerA/MyActionA">MyFunctionA</a>
      <ul style="display: none;">

        <li class="parent">
          <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c12/a12">f12</a> 
          <ul style="display: none;">
            <li>
              <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c13/a13">f13</a> 
            </li>
            <li>
              <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c14%20/a14">f14</a> 
            </li>
          </ul>
        </li>
        <li>
          <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c16/a16">f16</a> 
        </li>
      </ul>
    </li>
    <li>
      <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/CourseManagement/CoursesHome">Course Management</a>
    </li>
  </ul>

Answer 1

您的代码就快完成了。您只需要注意 li.parent 而不是 li.parent > a。因此，您的 JavaScript 代码可能如下所示:

 $(document).ready(function() {

   $('.Nav_tree_wrapper ul li').each(function() {
     if ($(this).children('ul').length > 0) {
       $(this).addClass('parent');
     }
   });

   $(".Nav_tree_wrapper ul li.parent").hover(
     function() {
       $(this).toggleClass('active');
       $(this).children('ul').slideToggle('fast');


     }, function() {
       $(this).toggleClass('active');
       $(this).children('ul').slideToggle('fast');
     }
   );
 });

还有用于测试它的 JS-Fiddle:http://jsfiddle.net/as9fxkLf/1/

但是有个小问题...

如果您尝试过 JS-Fiddle，您会立即看到问题所在。有多个仅在悬停时打开和关闭的子级别，它很快就会变得非常紧张。您可能希望水平排列导航的第一级(或第二级)，这样您就不会意外地过快触发悬停事件。

或者，您可以使用 jQuery 悬停意图插件。它将悬停的开始延迟一百毫秒:

http://cherne.net/brian/resources/jquery.hoverIntent.html