addClass 在下拉菜单中单击时从按钮中删除答案

【问题标题】：addClass is removed from button when clicking inside Dropdown menuaddClass 在下拉菜单中单击时从按钮中删除
【发布时间】：2017-01-14 20:46:00
【问题描述】：

激活下拉菜单的按钮使用单击而不是悬停，在单击时，我使用 jquery 添加类，并在我使用 $(document).click 的按钮外部单击时删除类。问题是，当我在下拉菜单中单击时，该类被删除（这显然会发生）

无论如何都要为下拉 div 做一个例外，或者有什么可以用来解决问题的修复方法。

$(document).ready(function(){

 $(".menu1TextContainer").click(function(event){

     $(".menu1Container").toggleClass("addclass")
     event.preventDefault();

 });

$(document).click(function(event) {
      if(!$(event.target).is(".menu1TextContainer")){
        $(".menu1Container").removeClass("addclass"); //make all inactive
      }
    });

});

https://jsfiddle.net/9j3k61rg/3/

谢谢！

【问题讨论】：

也许你想要 toggleClass 代替？
你能试试这个解决方案吗？ stackoverflow.com/questions/1403615/…

标签： javascript jquery html css dropdown

【解决方案1】：

您只需要在下拉菜单打开时跳过添加/删除类。我为你做了一个工作代码：

我更新了你的 sn-p，请看这里：https://jsfiddle.net/9j3k61rg/4/

$(document).click(function(event) {
if (!$(event.target).is(".menu1TextContainer") && !$(event.target).is("#menu1Dropdown")) {
         $(".menu1Container").removeClass("addclass"); //make all inactive
     }
        });

});

【讨论】：

【解决方案2】：

你可以通过检查被点击元素的id来选择不做removeClass。

你可以这样检查——

if (event.target.id != "menu1Dropdown") {
           $(".menu1Container").removeClass("addclass"); //make all inactive
         }

下面的完整工作 sn-p。

 $(document).ready(function() {

   $(".menu1TextContainer").click(function(event) {
     $(".menu1Container").addClass("addclass")
     event.preventDefault();
   });

   $(document).click(function(event) {
     if (event.target.id != "menu1Dropdown") {
       $(".menu1Container").removeClass("addclass"); //make all inactive
     }
   });

 });

 $(function() {

   // Dropdown toggle
   $('.menu1Container').click(function() {
     $(this).next('#menu1Dropdown').slideToggle(100);
   });

   $(document).click(function(e) {
     var target = e.target;
     if (!$(target).is('.menu1') && !$(target).parents().is('.menu1')) {
       $('#menu1Dropdown').slideUp(100);
     }
   });

 });

 $(function() {

   // Dropdown toggle
   $('.menu2Container').click(function() {
     $(this).next('#menu2Dropdown').slideToggle(100);
   });

   $(document).click(function(e) {
     var target = e.target;
     if (!$(target).is('.menu2') && !$(target).parents().is('.menu2')) {
       $('#menu2Dropdown').slideUp(100);
     }
   });

 });

/* Menu 1 */

.menu1 {
  position: absolute;
  left: 67px;
  top: 43px;
  height: 40px;
  width: 99px;
  cursor: pointer;
}

.menu1Container {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 40px;
  width: 99px;
  background-color: yellow;
}

.menu1TextContainer {
  position: absolute;
  top: -13px;
  left: 0px;
  height: 40px;
  width: 99px;
  text-align: center;
  line-height: 40px;
  color: white;
  font-family: montserrat;
  font-size: 13px;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}


/* Menu 1 Drop Down */

#menu1Dropdown {
  position: fixed;
  top: 83px;
  right: 0px;
  width: 100%;
  height: 200px;
  background-color: #333333;
  display: none;
}


/* Menu 1 Drop Down End */

.addclass {
  background-color: #333333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu1">

  <div class="menu1Container">
    <p class="menu1TextContainer" id="btn">BUTTON1</p>
  </div>

  <div id="menu1Dropdown">

  </div>

</div>

【讨论】：

【解决方案3】：

尝试更改以下代码

$(document).click(function (event) {
            if (!$(event.target).is(".menu1TextContainer") && (!$(event.target).is("#menu1Dropdown"))) {
                $(".menu1Container").removeClass("addclass"); //make all inactive
            }
        });

【讨论】：

【解决方案4】：

单击下拉菜单时，您可以跳过删除“addclass”。

$(document).click(function(event) {
     if (!$(event.target).is(".menu1TextContainer") && !$(event.target).is("#menu1Dropdown")) {
         $(".menu1Container").removeClass("addclass"); //make all inactive
     }
 });

【讨论】：

【解决方案5】：

尝试将您的 JS 替换为：

$(document).ready(function(){

     $(".menu1TextContainer").click(function(event){

         $(".menu1Container").toggleClass("addclass")
         event.preventDefault();

     });

 $("*:not(.menu1Container)").click(function(event) {

            $(".menu1Container").removeClass("addclass"); //make all inactive

        });

});

我希望这是预期的效果..

【讨论】：

【解决方案6】：

我的解决方案与“@herrsiim”之一不同。原因是事件冒泡 => 我的解决方案是防止冒泡：

在 javascript 的第 32 行，当您滑动下拉菜单时，更改为：

$(this).next('#menu1Dropdown').slideToggle(100);

到：

$(this).next('#menu1Dropdown').slideToggle(100).click(function(event){
    event.stopPropagation();
  });

这和“@herrsiim”的效果是一样的

【讨论】：

【解决方案7】：

这对你有用。
这实际上是在打开下拉菜单时删除“addclass”。

$(文档).click(函数(事件) { if (!$(event.target).is(".menu1TextContainer") && !$(event.target).is("#menu1Dropdown")) { $(".menu1Container").removeClass("addclass"); //使所有不活动 } }); });

我希望我有所帮助。如果有不清楚的地方，请随时提问。

【讨论】：