这里我创建了用慢动作切换内容。。。但它显示出文本般的传播效果如何消除这种扩散效应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 extra-p">
<div class="pannel" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div><!--md-12-->
<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 anc-btn">
<button class="btn btn-orange tip-btn">read more</button>
</div><!--md-2-->
<script type="text/javascript">
$(document).ready(function(){
$(".tip-btn").click(function(){
$(".pannel").toggle("slow");
});
});
</script>
</body>
</html>引导程序jquery javascropt
您需要使用slideToggle而不是toggle，这将帮助您在没有扩散效果的情况下显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 extra-p">
<div class="pannel" style="display: none;">
<p>1 . Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 anc-btn">
<button class="btn btn-orange tip-btn">read more 1</button>
</div><!--md-2-->
</div><!--md-12-->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 extra-p">
<div class="pannel" style="display: none;">
<p>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 anc-btn">
<button class="btn btn-orange tip-btn">read more 2</button>
</div><!--md-2-->
</div><!--md-12-->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 extra-p">
<div class="pannel" style="display: none;">
<p>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 anc-btn">
<button class="btn btn-orange tip-btn">read more 3</button>
</div><!--md-2-->
</div><!--md-12-->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 extra-p">
<div class="pannel" style="display: none;">
<p>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 anc-btn">
<button class="btn btn-orange tip-btn">read more 4</button>
</div><!--md-2-->
</div><!--md-12-->
<script type="text/javascript">
$(document).ready(function(){
$(".tip-btn").click(function(){
$(this).closest('.extra-p').find('.pannel').slideToggle("slow");
});
});
</script>
</body>
</html>这里可以使用两种方法缓慢切换内容：
1$(".pannel").slideToggle("slow")，如上述答案中所述
$(".pannel").fadeToggle("slow);显示和隐藏内容
对于多个按钮
<button class="tip-btn" check="div1"></button>
<button class="tip-btn" check="div2"></button>
<button class="tip-btn" check="div3"></button>
让div1、div2和div3是要切换的三个div的id
<script type="text/javascript">
$('.tip-btn).click(function(){
var divId = $(this).attr("check");
$('#'+divId).fadeToggle("slow");
});
</script>
希望能有所帮助。