Question

我是jquery的新手，我想知道是否有办法从点击事件中排除多个div。首先，我正在寻找如何隐藏某些div，当鼠标点击它之外时。这只是给出一些结果的解决方案（不是选择器不起作用）。我也想排除#cartbasket div，因此相同的按钮可以继续在下面切换#cartbasketList ul。我尝试了很多组合，但没有任何好处......

HTML：

<div id="cartinfos">
  <div id="cartbasket"></div>
    <ul id="cartbasketList">
      <li><a href="#">somelink</a></li>
      <li><a href="#">somelink</a></li>
      <li><a href="#">somelink</a></li>
    </ul>
 </div>

CSS：

#cartinfos {
    position: relative;
    display: inline-block;
    text-align: right;
    width: 50%;
    left: 10px;
    padding: 15px 0px;
}

#cartbasket {
    position: relative;
    display: inline-block;
    background: #ff0000;
    width: 40px;
    height: 40px;
}

#cartbasketList {
   position: absolute;
   display: none;
   border-top: 5px solid #ff0000;
   width: 250px;
   height: 400px;
   top: 60px;
   right: 0px;
   background:#fff;
   z-index: 999999;
}

jquery的：

  $(function() {

      $("#cartbasket").click(function() {
         $("#cartbasketList").slideToggle("fast");
    });


      $("body").mouseup(function(event) {
        if (event.target.id != 'cartbasketList') {
            $("#cartbasketList").slideUp(100);
        }

    });


    });

Answer 1

您应该跟踪点击事件并检查是否点击了某个元素。

请务必仅使用1次点击事件，否则事件将开始冒泡并给您带来不良影响。

$(function() {

    var $cartList = $('#cartbasketList');

    $(document).on('click', function(e) {
        var target = e.target.id;

        if(target == "cartbasket"){
            $cartList.slideToggle('fast');
        }
        else {
            $cartList.slideUp('fast');
        }
    });

});

如何从点击事件中排除更多div id

1 个答案:

Demo Fiddle