Javascript/JQuery 嵌套 if 语句无法正常工作

Question

JSFiddle演示问题( Angular 框很难看到)

我有 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();
    }
}); 

});

Answer 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 类已添加到您的容器中