如何在一个项目可见时隐藏其他项目？

Question

亲爱的 Whosebug 用户，您好。我正在尝试使用 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();
    }
});

Answer 1

您的 if-else 条件仅在页面重新加载时运行ning。此后，当您单击消息框或通知框时，if-else 条件不是运行ning，因为 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();
        }
    };

});**

如何在一个项目可见时隐藏其他项目？

How do I hide other items while one item is visible?

jquery

tailwind-css