当一个项目可见时如何隐藏其他项目？答案

【问题标题】：How do I hide other items while one item is visible?当一个项目可见时如何隐藏其他项目？
【发布时间】：2021-09-30 21:02:53
【问题描述】：

亲爱的 stackoverflow 用户您好。我正在尝试使用 jquery 制作消息和通知框。但是例如，当我想在消息框打开时打开通知框时，我希望隐藏其他项目。我试过但失败了。

我的 CSS 框架是 TAİLWİNDCSS

我的 HTML 代码：

<div class="relative">
        <i id="messageIcon" data-message="6" class="fa fa-envelope cursor-pointer icon"></i>
        <div id="messageBox" class="absolute top-full left-0 mt-4 bg-white shadow-2xl text-black p-4" style="display: none;">
          hello world
        </div>
      </div>
      <div class="relative">
        <i id="notificationIcon" data-notification="3" class="fa fa-bell cursor-pointer icon"></i>
        <div id="notificationBox" class="absolute top-full left-0 mt-4 bg-white shadow-2xl text-black p-4" style="display: none;">
          hello world
        </div>
      </div>

我的 JS 代码：

$(document).ready(function () {
    $("#messageIcon").on("click", function () {
        $("#messageBox").fadeToggle();
    });
    $("#notificationIcon").on("click", function () {
        $("#notificationBox").fadeToggle();
    });
    if ($("#messageBox").css("display") === "block") {
        $("#notificationBox").fadeOut();
    } else if ($("#notificationBox").css("display") === "block") {
        $("#messageBox").fadeOut();
    }
});

【问题讨论】：

标签： jquery tailwind-css

【解决方案1】：

您的 if-else 条件仅在页面重新加载时运行。现在之后，当您单击消息框或通知框时，if-else 条件不会运行，因为 if-else 条件未与任何事件绑定。

因此，您必须在点击事件上运行 if-else 语句。因此，为此，您必须将 if-else 语句放在点击事件调用的函数中。

我修改了你的代码。试试这个代码。

**$(document).ready(function () {
    $("#messageIcon").on("click", function () {
        BoxChecker();
    });
    $("#notificationIcon").on("click", function () {
        BoxChecker();
    });
    function BoxChecker(){
        if ($("#messageBox").css("display") === "block") {
            $("#notificationBox").fadeOut();
        } else if ($("#notificationBox").css("display") === "block") {
            $("#messageBox").fadeOut();
        }
    };

});**

【讨论】：