javascript - 使用 .show/.hide 和 .next 导致问题

Question

我想在页面加载时显示 serviceBarId1 的 service-specificBar-tab 并隐藏其他选项卡，这是可行的。但是，无法正常工作的部分是当我单击该选项卡时，我希望其他三个选项卡的其余部分按照 HTML 的顺序显示，然后当我再次单击第一个选项卡时，用于关闭选项卡 2、3 和 4。我现在使用的方法是非常错误的。当您单击 serviceBarId1 打开选项卡时，所有选项卡都打开，但随后一个选项卡消失了 - 这在我添加之前没有发生:

$("#serviceBarId1").click(function() {
    $("#serviceBarId2").hide(1000);
    $("#serviceBarId3").hide(1000);
    $("#serviceBarId4").hide(1000);
});

当我尝试关闭标签时，没有任何反应。

我做错了什么？

$("#serviceBarId1").addClass("active");
$("#serviceBarId2").hide();
$("#serviceBarId3").hide();
$("#serviceBarId4").hide();
$("#serviceBarId1").click(function() {
    $(".service-specificBar-tab").first().show("fast", function showNext() {
        $(this).next(".service-specificBar-tab").show("fast", showNext);
    });
});
$("#serviceBarId1").click(function() {
    $("#serviceBarId2").hide(1000);
    $("#serviceBarId3").hide(1000);
    $("#serviceBarId4").hide(1000);
});

#gray {
    background: #f9f9f9;
    width: 100%;
    height: 700px;
    position: relative;
}

#service-specificBar-container {
    position: relative;
    top: 50px;
    width: 100%;
    padding: 25px 0;
}

#service-specificBar {
    width: 100%;
    height: 100px;
    position: relevant;
}

.service-specificBar-tab {
    width: 25%;
    height: 100%;
    display: inline-block;
    margin: 0;
    padding: 0px;
    text-align: center;
    font-size: 1.6em;
}

.service-specificBar-tab:nth-child(odd) {
    background: #dbdbdb;
    transition: ease-in-out .3s;
    cursor: pointer;
}

.service-specificBar-tab:nth-child(even) {
    background: #FFF;
    transition: ease-in-out .3s;
    cursor: pointer;
}

#serviceBarId1:hover,
#serviceBarId2:hover,
#serviceBarId3:hover,
#serviceBarId4:hover {
    transition: ease-in-out .3s;
    color: #FFF;
}

#serviceBarId2:hover {
    background: #0085A1;
}

#serviceBarId3:hover {
    background: #a11c00;
}

#serviceBarId4:hover {
    background: #00a16d;
}


/*----Test for page swithces ----*/

#serviceBarId1.active {
    background: #a10085;
    color: #FFF;
}

#serviceBarId2.active {
    background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="gray">
    <div id="service-specificBar-container">
        <div id="service-specificBar">
            <div class="service-specificBar-tab" id="serviceBarId1">A</div>
            <div class="service-specificBar-tab" id="serviceBarId2">B</div>
            <div class="service-specificBar-tab" id="serviceBarId3">C</div>
            <div class="service-specificBar-tab" id="serviceBarId4">D</div>
        </div>
    </div>
</div>

Answer 1

在 click 事件中，您可以检查可见元素的数量。如果可见 divs 的 length 为 1，则显示 sibling ，否则隐藏他们:

$("#serviceBarId1").click(function() {
  if ($('#service-specificBar').find(':visible').length == 1) {
    $(".service-specificBar-tab").first().show("fast", function showNext() {
      $(this).next(".service-specificBar-tab").show("fast", showNext);
    });
  } else {
    $(".service-specificBar-tab").next().hide("fast", function hideNext() {
      $(this).next(".service-specificBar-tab").hide("fast", hideNext);
    });
  }
});

Fiddle Demo