JSFiddle显示问题(角落盒很难看到)
我有4个元素链接到每个按钮。当按下与该部分对应的按钮时,应检查其他3个元素是否都不可见。如果另一部分可见,则应在向下滑动所需部分之前将其向上滑动。
我认为最好的方法是嵌套if语句(如果b是可见的,那么如果c是可见的,依此类推)。目前,它适用于前两个元素,这是因为第一个if语句对应于每个元素。然而对于其他人而言,它似乎甚至没有超过第一个声明,只是向下滑动该部分,导致多个部分被打开。
我是否正确使用嵌套的if语句,或者它是否兼容?我不知道用jquery而不是css来隐藏这些部分是否更好,但我认为它无论如何都会起作用。如果我错过了什么,请随意提问。
由于
(Javascript代码)
$(document).ready(function(){
$("#web-design").click(function(){
if ($("#graphic-design-slide").css("visibility") == "hidden") {
if ($("#branding-slide").css("visibility") == "hidden") {
if ($("#film-production-slide").css("visibility") == "hidden") {
$("#web-design-slide").slideDown();
} else {
$("#film-production-slide").slideUp();
$("#web-design-slide").slideDown();
}
} else {
$("#branding-slide").slideUp();
$("#web-design-slide").slideDown();
}
} else {
$("#graphic-design-slide").slideUp();
$("#web-design-slide").slideDown();
}
});
$("#graphic-design").click(function(){
if ($("#web-design-slide").css("visibility") == "hidden") {
if ($("#branding-slide").css("visibility") == "hidden") {
if ($("#film-production-slide").css("visibility") == "hidden") {
$("#graphic-design-slide").slideDown();
} else {
$("#film-production-slide").slideUp();
$("#graphic-design-slide").slideDown();
}
} else {
$("#branding-slide").slideUp();
$("#graphic-design-slide").slideDown();
}
} else {
$("#web-design-slide").slideUp();
$("#graphic-design-slide").slideDown();
}
});
$("#branding").click(function(){
if ($("#web-design-slide").css("visibility") == "hidden") {
if ($("#graphic-design-slide").css("visibility") == "hidden") {
if ($("#film-production-slide").css("visibility") == "hidden") {
$("#branding-slide").slideDown();
} else {
$("#film-production-slide").slideUp();
$("#branding-slide").slideDown();
}
} else {
$("#graphic-design-slide").slideUp();
$("#branding-slide").slideDown();
}
} else {
$("#web-design-slide").slideUp();
$("#branding-slide").slideDown();
}
});
$("#film-production").click(function(){
if ($("#web-design-slide").css("visibility") == "hidden") {
if ($("#graphic-design-slide").css("visibility") == "hidden") {
if ($("#branding-slide").css("visibility") == "hidden") {
$("#film-production-slide").slideDown();
} else {
$("#branding-slide").slideUp();
$("#film-production-slide").slideDown();
}
} else {
$("#graphic-design-slide").slideUp();
$("#film-production-slide").slideDown();
}
} else {
$("#web-design-slide").slideUp();
$("#film-production-slide").slideDown();
}
});
$("#contactFormTitle").click(function(){
if ($("#contactFormArea").css("visibility") == "hidden") {
$("#contactFormArea").slideDown();
} else {
$("#contactFormArea").slideUp();
}
});
});
答案 0 :(得分:1)
您应该在容器中添加类,并在显示所需容器之前,使用该类隐藏所有容器。
<强> 实施例 强>
<div class="accordion">
Content
</div>
<div class="accordion">
Content
</div>
<div class="accordion">
Content
</div>
$('.accordion').click(function() {
$('.accordion').slideUp();
$(this).slideDown();
});
您的示例
$("#web-design").click(function(){
$(".div-to-hide").slideUp();
$("#web-design-slide").slideDown();
});
$("#graphic-design").click(function(){
$(".div-to-hide").slideUp();
$("#graphic-design-slide").slideDown();
});
<div class = "serviceSliderFilmProduction div-to-hide" id = "film-production-slide">
div-to-hide 类已添加到您的容器中
答案 1 :(得分:0)
向每个容器添加slider
类(或任何其他类),并使用data
属性将容器与按钮链接:
按钮:
<button class="serviceButton displayed" data-id="#web-design-slide">Find Out More!</button>
容器:
<div class="slider serviceSliderWebDesign" id="web-design-slide">
...
</div>
脚本:
$(".serviceButton").click(function(){
// grab the container id from data-id attribute of the button:
var el_id = $(this).data('id');
$('.slider:not('+el_id+')').slideUp('slow', function(){
$(el_id).slideDown();
});
});
如果您还要在点击时切换容器,请使用slideToggle()
:
$(".serviceButton").click(function () {
var el_id = $(this).data('id');
$('.slider:not(' + el_id + ')').slideUp();
$(el_id).slideToggle();
});