我有一些 div 可以通过点击加号向下滑动。但是一个扩展的 div 会扩展另一个。我只需要单击 div 来插入空间和扩展。我试图设置包装器和显示的溢出。现在我不知道该怎么办。有人能帮我吗？
Codepen 引用:https://codepen.io/nikolinjho/pen/jONYxmj
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4 upon">
<p class="cust" style="">Lorem ipsum dolor sit amet
<i class="fa fa-plus-circle down" aria-hidden="true">
</i>
</p>
<div class="hidden slid-own">
<p class="font-6">– Limited Projects approved per
quarter</p>
<p class="font-6">– Free base level website hosting,
up to 5 initial revisions prior to launch!</p>
<p class="font-6">– A great low-cost option for small
businesses & startups</p>
<p class="font-6">– SEO Optimized & Mobile-
Friendly</p>
<p class="font-6">– Contains our Google Ads</p>
</div>
<p>consectetur adipiscing elit</p>
</div>
<div class="col-sm-4 upon">
<p class="cust" style="">Lorem ipsum dolor sit amet
<i class="fa fa-plus-circle down" aria-hidden="true"></i>
</p>
<div class="hidden slid-own">
<p class="font-6">– Limited Projects approved per
quarter</p>
<p class="font-6">– Free base level website hosting, up
to 5 initial revisions prior to launch!</p>
<p class="font-6">– A great low-cost option for small
businesses & startups</p>
<p class="font-6">– SEO Optimized & Mobile-Friendly</p>
<p class="font-6">– Contains our Google Ads</p>
</div>
<p>consectetur adipiscing elit</p>
</div>
<div class="col-sm-4 upon">
<p class="cust" style="">Lorem ipsum dolor sit amet
<i class="fa fa-plus-circle down" aria-hidden="true"></i>
</p>
<div class="hidden slid-own">
<p class="font-6">– Limited Projects approved per quarter</p>
<p class="font-6">– Free base level website hosting, up to 5
initial revisions prior to launch!</p>
<p class="font-6">– A great low-cost option for small
businesses & startups</p>
<p class="font-6">– SEO Optimized & Mobile-Friendly</p>
<p class="font-6">– Contains our Google Ads</p>
</div>
<p>consectetur adipiscing elit</p>
</div>
</div>
</div>
css:
<style type="text/css">
.cust {
display: flex;
align-items: center;
justify-content: space-between;
}
.fa-plus-circle, .fa-minus-circle {
cursor: pointer;
color: green;
}
.upon {
border: 1px solid #eadddd;
}
.upon p {
text-transform: uppercase;
font-size: 14px;
letter-spacing: 2px;
}
.slid-own .font-6{
font-size: 12px;
text-transform: lowercase;
}
.hidden {
display: none;
}
</style>
js:
<script type="text/javascript">
$(".down").click(function () {
console.log($(this).parent().parent())
$(this).parent().parent().find(".slid-own").slideToggle();
$(".down").toggleClass("fa-minus-circle ");
})
</script>
如何处理？
最佳答案
您需要将“upon”类div 包装在列div 中并分别更改jquery
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-sm-4 ">
<div class="upon">
<p class="cust" style="">Lorem ipsum dolor sit amet
<i class="fa fa-plus-circle down" aria-hidden="true"></i>
</p>
<div class="hidden slid-own">
<p class="font-6">– Limited Projects approved per quarter</p>
<p class="font-6">– Free base level website hosting, up to 5 initial revisions prior to launch!</p>
<p class="font-6">– A great low-cost option for small businesses & startups</p>
<p class="font-6">– SEO Optimized & Mobile-Friendly</p>
<p class="font-6">– Contains our Google Ads</p>
</div>
<p>consectetur adipiscing elit</p>
</div>
</div>
<div class="col-sm-4 ">
<div class="upon">
<p class="cust" style="">Lorem ipsum dolor sit amet
<i class="fa fa-plus-circle down" aria-hidden="true"></i>
</p>
<div class="hidden slid-own">
<p class="font-6">– Limited Projects approved per quarter</p>
<p class="font-6">– Free base level website hosting, up to 5 initial revisions prior to launch!</p>
<p class="font-6">– A great low-cost option for small businesses & startups</p>
<p class="font-6">– SEO Optimized & Mobile-Friendly</p>
<p class="font-6">– Contains our Google Ads</p>
</div>
<p>consectetur adipiscing elit</p>
</div>
</div>
<div class="col-sm-4 ">
<div class="upon">
<p class="cust" style="">Lorem ipsum dolor sit amet
<i class="fa fa-plus-circle down" aria-hidden="true"></i>
</p>
<div class="hidden slid-own">
<p class="font-6">– Limited Projects approved per quarter</p>
<p class="font-6">– Free base level website hosting, up to 5 initial revisions prior to launch!</p>
<p class="font-6">– A great low-cost option for small businesses & startups</p>
<p class="font-6">– SEO Optimized & Mobile-Friendly</p>
<p class="font-6">– Contains our Google Ads</p>
</div>
<p>consectetur adipiscing elit</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>
$(".down").click(function () {
console.log($(this).parent().parent())
$(this).parent().parent().parent().find(".slid-own").slideToggle();
$(".down").toggleClass("fa-minus-circle ");
})
关于javascript - 如何防止div下滑？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57819849/