Question

我正在做一个下拉列表，当我将鼠标悬停在某个特定元素上时，我应该只突出显示所选的元素，不幸的是，整个列表在我的脑海中都突出显示了，我知道问题在于还是一个新的下拉菜单列表，不幸的是，我无法处理它。这是实际结果jsfiddle code

<div class="nav">
        <ul>
            <li class="parent">
                <a class="parent_click">Driving</a>
                <ul class="sub_list">
                    <li class="test">
                        <a class="sub_click">Type of Car</a>
                        <ul class="sub_sub_list">
                            <li>List 1</li>
                            <li>List 2</li>
                            <li>List 3</li>
                        </ul>
                    </li>
                    <li class="test">
                        <a class="sub_click">Tracks</a>
                        <ul class="sub_sub_list">
                            <li>List 1</li>
                            <li>List 2</li>
                            <li>List 3</li>
                        </ul>
                    </li>
                    <li class="teset">Type of driving</li>
                </ul>
            </li>
        </ul>
    </div>
</div>

我的CSS：

.sub_list, .sub_sub_list {display:none;}

li:hover{
    background-color:red;
}

我的JS

$(".sub_list").slideUp();
$(".parent_click").click(function() {
    $(".parent_click").not(this).next().slideUp()
    $(this).closest(".parent").find(".sub_list").slideToggle();

    return false;
});
$(".sub_click").click(function() {
    var elem = $(this).next()
    $(".sub_sub_list").not(elem).slideUp();
    $(this).closest(".test").find(".sub_sub_list").slideToggle();
});

Answer 1

尝试使用锚点而不是li进行悬停。这将是最简单，最简单的解决方案。如果您需要复杂的解决方案，则可以使用代码... 请参见下面的代码段。

$(".sub_list").slideUp();
$(".parent_click").click(function() {
	$(".parent_click").not(this).next().slideUp()
	$(this).closest(".parent").find(".sub_list").slideToggle();

	return false;
});
$(".sub_click").click(function() {
	var elem = $(this).next()
	$(".sub_sub_list").not(elem).slideUp();
	$(this).closest(".test").find(".sub_sub_list").slideToggle();
});

.sub_list, .sub_sub_list {display:none;}
a:hover{
	background-color:red;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8"/>
	<meta
			name="viewport"
			content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
	<!-- Bootstrap CSS -->
	<link
			rel="stylesheet"
			href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
			integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
			crossorigin="anonymous">
	<title>Hello, world!</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
	<div class="nav">
		<ul>
			<li class="parent">
				<a class="parent_click">Driving</a>
				<ul class="sub_list">
					<li class="test">
						<a class="sub_click">Type of Car</a>
						<ul class="sub_sub_list">
							<li><a>List 1</a></li>
							<li><a>List 2</a></li>
							<li><a>List 3</a></li>
						</ul>
					</li>
					<li class="test">
						<a class="sub_click">Tracks</a>
						<ul class="sub_sub_list">
							<li><a>List 1</a></li>
							<li><a>List 2</a></li>
							<li><a>List 3</a></li>
						</ul>
					</li>
					<li class="teset"><a>Type of driving</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->

<script
		src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
		integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
		crossorigin="anonymous"
></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>

仅突出显示所选项目

1 个答案: