我正在尝试构建多级的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>
答案 0 :(得分:0)
你的代码几乎就在那里。您只需要关注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毫秒: