jQuery on click slide down specific div
Question
I'm having a complete brain melt, but I cannot remember how to get a specific div to do a jQuery slideDown on a click event.
This is what I've been trying to do:
$('.content--link').on('click', function(e) { $(this).next('.content').slideToggle(); e.preventDefault(); });
body { padding: 20px; } .content { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="group"> <div class="link"> <a class="content--link" href="#">Click this 1</a> </div> <div class="content"> <p>This is the content to show for 1</p> </div> </div> <div class="group"> <div class="link"> <a class="content--link" href="#">Click this 2</a> </div> <div class="content"> <p>This is the content to show for 2</p> </div> </div>
I've done this before, but I'm not sure what I'm not getting correct. I think I need to traverse up and then back down again with .parents possibly? Anyways, it's been a day.
4 answers
solution1
4 2019-07-09 04:06:20
Almost, use $(this).parent().next('.content') .
.next() won't work alone in this situation as it gets the immediately following sibling of each element in the set of matched elements. content--link doesn't have a sibling but it's parent (div.link) does.
solution2
2 2019-07-09 03:47:52
You are missing parent() . Use parent before next to toggle next div.
$('.content--link').on('click', function(e) { $(this).parent().next('.content').slideToggle(); e.preventDefault(); });
body { padding: 20px; } .content { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="group"> <div class="link"> <a class="content--link" href="#">Click this 1</a> </div> <div class="content"> <p>This is the content to show for 1</p> </div> </div> <div class="group"> <div class="link"> <a class="content--link" href="#">Click this 2</a> </div> <div class="content"> <p>This is the content to show for 2</p> </div> </div>
solution3
2 2019-07-09 03:56:03
试试添加parent()
$(this).parent().next('.content').slideToggle();
solution4
0 2019-07-09 04:38:07
You can simply use Bootstrap to achieve this, just try below code.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br>
<a href="#" data-toggle="collapse" data-target="#demo">Item #1</a>
<div id="demo" class="collapse">
Collapsible Group Item #1
</div>
<br> <br>
<a href="#" data-toggle="collapse" data-target="#demo1">Item #2</a>
<div id="demo1" class="collapse">
Collapsible Group Item #2
</div>
<br> <br>
<a href="#" data-toggle="collapse" data-target="#demo3">Item #3</a>
<div id="demo3" class="collapse">
Collapsible Group Item #3
</div>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.