滑动切换隐藏上一个 div

Question

提前感谢您的时间！ 这是我的设置和 Id，就像以前单击的div 一样，在显示带有滑块切换的新div 之前隐藏。

.CSS：

.waxing {
display: none;
}
.facials {
display: none;
}
.bodywraps {
display: none;
}

.HTML

<div class="heroIcons">
<div class="button waxingButton">
<p>view prices</p>
</div>
<div class="button facialsButton">
<p>view prices</p>
</div>
<div class="button bodywrapsButton">
<p>view prices</p>
</div> 
</div>
<div class="section services">
<div class="wrapper">
<div class="waxing">
<p>content that I want to slidetoggle</p>
</div>
</div>   
</div>
<div class="section services">
<div class="wrapper">
<div class="facials">
<p>content that I want to slidetoggle</p>
</div>
</div>   
</div>
<div class="section services">
<div class="wrapper">
<div class="bodywraps">
<p>content that I want to slidetoggle</p>
</div>
</div>   
</div>

杰奎里

$(".heroIcons .waxingButton").click(function(){
$(".waxing").slideToggle(1500);
});
$(".heroIcons .facialsButton").click(function(){
$(".facials").slideToggle(1500);
});
$(".heroIcons .bodywrapsButton").click(function(){
$(".bodywraps").slideToggle(1500);
});

这一切都很好用，但是当我单击打开不同的div时，我喜欢它关闭以前打开的div

Answer 1

你应该尽量避免代码重复(DRY 原则(。

这里有一点重构的标记，但您可以添加任意数量的按钮和部分，而无需添加更多 JS 代码：

$(".button").click(function() {
var className = $(this).data('button')

$('.content').hide()
$('.' + className).slideToggle(1500);
});

.button {
cursor: pointer
}
.content {
display: none;
background: honeydew;
border: 1px solid green;
padding: 1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button" data-button="waxing">
<p>view prices</p>
</div>
<div class="button" data-button="facials">
<p>view prices</p>
</div>
<div class="button" data-button="bodywraps">
<p>view prices</p>
</div>
<div class="content waxing">waxing PRICES</div>
<div class="content facials">facials PRICES</div>
<div class="content bodywraps">bodywraps PRICES</div>

Answer 2

你可以做这样的事情 - 它应该在打开你点击的下拉菜单之前隐藏打开的下拉菜单(你需要调整 .hide 上的速度(

$(".heroIcons .waxingButton").click(function() {
$(".bodywraps").hide(1500);
$(".facials").hide(1500);
$(".waxing").slideToggle(1500);
});
$(".heroIcons .facialsButton").click(function() {
$(".bodywraps").hide(1500);
$(".waxing").hide(1500);
$(".facials").slideToggle(1500);
});
$(".heroIcons .bodywrapsButton").click(function() {
$(".waxing").hide(1500);
$(".facials").hide(1500);
$(".bodywraps").slideToggle(1500);
});