jquery - Slidetoggle 隐藏上一个 div
问题描述
提前感谢您的宝贵时间!这是我的设置,我喜欢在使用滑动切换显示新 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>
jQuery
$(".heroIcons .waxingButton").click(function(){
$(".waxing").slideToggle(1500);
});
$(".heroIcons .facialsButton").click(function(){
$(".facials").slideToggle(1500);
});
$(".heroIcons .bodywrapsButton").click(function(){
$(".bodywraps").slideToggle(1500);
});
这一切都很好,但是当我单击打开不同的 div 时,我希望它关闭以前打开的 div
解决方案
您应该尽量避免代码重复(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>
推荐阅读
- python - 如何将python列表项与正则表达式匹配
- jquery - 如何使用参数从提交按钮调用 JQuery 函数
- python - 图匹配算法
- react-native - React-native (Expo) 中的大语言环境数据库
- typescript - 带有打字稿的vuejs jsx
- c# - 具有多个字段的 OrderByDescending
- python - python sqlite3选择更新的行值
- r - 在 R 中交换列会返回“下标越界”
- c++ - Clang 为使用的类型别名发出“未使用的类型别名”警告
- java - 在 Listview 中的 CalendarView 上显示选定的日期