CODEWITHSUNDEEP
htmlcss
PawelC
PawelC

Reputation: 1226

Highlight only the selected item

I'm doing a drop-down list where, when I hover over a specific element, I should highlight only the selected one, unfortunately the whole list is highlighted in my mind, I know the problem is that in one li there is also a new list to make a drop down menu, Unfortunately, I can not deal with it. It's actual result 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>

My CSS:

.sub_list, .sub_sub_list {display:none;}

li:hover{
    background-color:red;
}

My 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();
});

Upvotes: 0

Views: 136

Answers (1)

ElusiveCoder
ElusiveCoder

Reputation: 1609

Try using anchor for hover instead of li. It will be simplest and easiest solution. While you can play with code if you want complicated solution... See below snippet.

$(".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>

Upvotes: 2

Related Questions