javascript 如何使用JQuery在元素外部单击并允许容器立即褪色

eufgjt7s 于 2023-03-28 发布在 Java

关注(0)|答案(1)|浏览(159)

我有2个菜单（通知和徽章一样stackoverflow网站）如果我点击通知，我的徽章容器应该褪色，反之亦然。
但目前我可以发现，当我点击徽章时，通知容器并没有褪色，而是重叠。以下是我的html代码：

<div class="wishlist-dropsec" id="badge_notification_list">
  <span id="badge_notificationLink">
    <i class="fa fa-trophy"></i>
    <strong id="badge_notification_countt"></strong>
  </span>
  <div id="badge_tooltip">
    <div id="badge_notificationContainer">
      <div id="badge_notificationsBody" class="notifications"></div>
    </div>
  </div>
</div>
<div class="wishlist-dropsec" id="notification_list">
  <span id="notificationLink">
    <i class="fa fa-bell"></i>
    <strong id="notification_countt"></strong>
  </span>
  <div id="tooltip">
    <div id="notificationContainer">
      <div id="notificationsBody" class="notifications"></div>
    </div>
  </div>
</div>

下面是我的jQuery代码：

<script type="text/javascript" >
$(document).ready(function() {

  //Document Click hiding the popup 
  $(document).click(function() {
    $("#notificationContainer").hide();
    $("#tooltip").hide();
  });

  //Popup on click
  $("#notificationContainer").click(function() {
    return false;
  });

  //Document Click hiding the popup 
  $(document).click(function() {
    $("#badge_notificationContainer").hide();
    $("#badge_tooltip").hide();
  });

  //Popup on click
  $("#badge_notificationContainer").click(function() {
    return false;
  });

});
</script>

JavaScript

来源：https://stackoverflow.com/questions/75847585/how-to-click-outside-the-element-and-allow-the-container-fade-instantly-using-jq

1条答案

按热度按时间

nhhxz33t1#

你可以根据你点击的选择器隐藏/显示div，当用户点击div外的时候，你可以检查最近的div是否是wishlist-dropsec，根据这个你可以隐藏.tooltip_div。

演示代码：

$("#badge_notificationLink,#notificationLink").click(function() {
  $(".tooltip_div").removeClass("active");
  $(this).next().toggleClass("active")
})

// Hide div if user clicks outside of it
$(document).click(function(e) {
  if (!$(e.target).closest(".wishlist-dropsec").length) {
    $(".tooltip_div").removeClass("active");
  }
});

.wishlist-dropsec .tooltip_div {
  display: none;
}

.tooltip_div.active {
  display: block;
}

.wishlist-dropsec {
  float: right;
  margin-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wishlist-dropsec" id="badge_notification_list">
  <span id="badge_notificationLink">
    <i class="fa fa-trophy"></i>
    <strong id="badge_notification_countt">1 badge</strong>
  </span>
  <!--added here one extra class-->
  <div id="badge_tooltip" class="tooltip_div">
    <div id="badge_notificationContainer">
      <div id="badge_notificationsBody" class="notifications">
        something ....
      </div>
    </div>
  </div>
</div>
<div class="wishlist-dropsec" id="notification_list">
  <span id="notificationLink">
    <i class="fa fa-bell"></i>
    <strong id="notification_countt">4 notification</strong>
  </span>
  <!--added here one extra class-->
  <div id="tooltip" class="tooltip_div">
    <div id="notificationContainer">
      <div id="notificationsBody" class="notifications">something33</div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-03-28

我来回答

javascript 如何使用JQuery在元素外部单击并允许容器立即褪色

1条答案

相关问题

热门标签

最新问答