提前感谢您的时间! 这是我的设置和Id,就像之前点击的div一样,在使用slidetoggle显示新的div之前隐藏。
CSS:
static func sendFormattedTimeString(_ string: String?) -> String {
let dateFormatterGet = DateFormatter()
dateFormatterGet.dateFormat = "HH:mm"
dateFormatterGet.timeZone = TimeZone.current
let dateFormatterPrint = DateFormatter()
dateFormatterPrint.dateFormat = "HH:mm:ss"
dateFormatterPrint.timeZone = TimeZone(identifier: "UTC")
if let string = string,
let date = dateFormatterGet.date(from: string) {
return dateFormatterPrint.string(from: date)
}
else {
print("There was an error decoding the string")
return ""
}
}
HTML
.waxing {
display: none;
}
.facials {
display: none;
}
.bodywraps {
display: none;
}
JQuery的
<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>
这一切都很好,但是当我点击打开另一个div时,我喜欢关闭之前打开的div
答案 0 :(得分:1)
您应该尽量避免重复代码( DRY原则)。
这是一个有点重构的标记,但您可以添加任意数量的按钮和部分,而无需添加更多JS代码:
$(".button").click(function() {
var className = $(this).data('button')
$('.content').hide()
$('.' + className).slideToggle(1500);
});
&#13;
.button {
cursor: pointer
}
.content {
display: none;
background: honeydew;
border: 1px solid green;
padding: 1rem;
}
&#13;
<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>
&#13;
答案 1 :(得分:-1)
你可以这样做 - 它应该在你打开之前隐藏打开的下拉菜单(你需要调整.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);
});