鼠标悬停在列表上时展开列表 - css列表树视图

Question

我正在尝试构建多级的CSS基本列表树结构（UL-Li ...）。我已经设法将鼠标悬停在1级li上，它显示了它的子ul-li并在鼠标悬停时移回原来的位置。但是它在级别1时删除了活动类，即使它有子元素，所以我的问题是我如何检查鼠标是否在$ 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 hover intent插件。它将悬停的开始延迟了100毫秒：

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