Question

激活下拉列表的按钮使用点击而不是悬停，点击，我已经使用jquery添加类，并在按钮外单击时删除了类我使用$（document）.click。问题是，当我在下拉菜单中单击时，类被删除（显然会发生这种情况）

有没有为dropdown 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/

谢谢！

Answer 1

您可以通过检查点击的元素的ID来选择不执行removeClass。

你可以这样检查 -

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

下面的完整工作片段。

 $(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>

Answer 2

您只需在下拉列表打开时跳过课程添加/删除。我为你制作了一个有效的代码：

我更新了您的代码段，请参阅此处：https://jsfiddle.net/9j3k61rg/4/

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

});

Answer 3

尝试更改以下代码

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

Answer 4

您可以跳过删除＆＃34; addclass＆＃34;点击下拉列表时。

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

Answer 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

        });

});

我希望这会产生预期的效果。

Answer 6

我的解决方案不同于＆＃34; @ herrsiim＆＃34;。原因是事件冒泡=＆gt;我的解决方案是防止冒泡：

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

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

为：

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

这与＆＃34; @ herrsiim＆＃34;

的效果相同

Answer 7

这对你有用。
这实际上是，如果打开下拉列表，它会删除'addclass'。

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

});

我希望我帮助过。如果事情不够清楚，请随意提问。

单击“下拉”菜单中的addClass将从按钮中删除

7 个答案: