在外部单击时 removeClass('active')

Posted 2023-05-09

【中文标题】在外部单击时 removeClass(\'active\')

【英文标题】：removeClass('active') when clicking outside在外部单击时 removeClass('active')

【发布时间】：2021-10-20 11:35:27

【问题描述】：

我正在使用此代码通过添加/删除类来控制侧边栏的显示。

前 2 个函数有效，但我还添加了第 3 个函数，以尝试在单击侧边栏外部时删除活动类。

现在没有任何效果，它只是将一些正文内容推到一边。

jQuery(document).ready(function($)
    $(".btn-open-sidecart").click(function()
        $('.sidebar').addClass("active");
        $('.overlay').addClass("active");
    );

    $(".btn-close-sidecart").click(function() 
        $('.sidebar').removeClass("active");
        $('.overlay').removeClass("active");
    );

    $('body').click(function(event)
        if($(event.target).attr('class') !== "sidebar" && $(event.target).attr('class') !== "btn-close-sidecart") 
            $('.sidebar').removeClass('active');
            $('.overlay').removeClass('active');
        ;
    );
);

在侧边栏外单击时，如何将这个问题也修复为 removeClass('active')？

【问题讨论】：

我怀疑你的问题是你没有直接点击sidebar（例如点击btn-close-sidecart）。或者 event.target 没有 exactly “侧边栏”并且可能有其他类。你可以试试$(event.target).hasClass("sidebar") 或者你可以试试&& $(event.target).closest(".sidebar").length === 0 - 即检查事件目标是否在inside侧边栏

这能回答你的问题吗？ How do I detect a click outside an element?

好吧，点击将元素传播到正文，然后您将其删除....停止传播事件....

【参考方案1】：

您只检查您单击的元素是“.sidebar”还是“.btn-close-sidecart”，而不是他们的父母之一是否有这些类。

因此，即使单击“.sidebar”内的按钮也会触发您的方法，因为它们是“.sidebar”

这是一个工作示例

$(".btn-open-sidecart").click(function()
    $('.sidebar').addClass("active");
    $('.overlay').addClass("active");
);

$(".btn-close-sidecart").click(function() 
    $('.sidebar').removeClass("active");
    $('.overlay').removeClass("active");
);

$('body').click(function(event)
  const ignoreElements = ["btn-open-sidecart", "sidebar"];
  let pass = true;

  $(ignoreElements).each(function(key, value) 
    if ($(event.target).hasClass(value) || $(event.target).closest(`.$value`).length > 0) 
      pass = false;
    
  );

  if (pass) 
    $('.sidebar').removeClass('active');
    $('.overlay').removeClass('active');
  
);

* 
  padding: 0;
  margin: 0;


.sidebar 
  position: fixed;
  z-index: 3;
  width: 200px;
  height: 100%;
  background: darkgrey


.sidebar:not(.active) 
  display: none;


.btn-close-sidecart 
  position: absolute;
  width: 20px;
  height: 20px;
  top 5px;
  right: 5px;
  background: grey;
  cursor: pointer;
  text-align: center;


.overlay 
  position: fixed;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5)


.overlay:not(.active) 
  display: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="sidebar">
    <div class="btn-close-sidecart">
    x
    </div>
    <ul>
      <li>
        <button onclick="console.log('test')">button 1</button>
      </li>
      <li>
        <button onclick="console.log('test2')">button 2</button>
      </li>
    </ul>
  </div>
  <div class="overlay">
  </div>
  <div class="content">
    <button class="btn-open-sidecart">Open sidebar</button>
  </div>
</div>