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

Javascript/JQuery Nested if statements not working correctly

本文关键字：语句 工作 不正常 if 嵌套 JQuery Javascript      更新时间：2023-11-24

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

您应该将类添加到容器中，在显示所需的容器之前，用该类隐藏所有容器。

示例 

<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隐藏类添加到容器

向每个容器添加一个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();
});

DEMO

相关文章：