Question

我正在尝试为我的小项目构建一个简单的下拉插件。我不想使用现成的插件，我想通过自己制作插件来学习。

HTML：

<div>
  <span class="dropdown_triger">press</span>
  <div class="content dropdown-closed">
 </div>
</div>

的CSS：

span{
  display:inline-block;
  background: green;
  padding: 5px;

}
.content{
  position: absolute;
  top: 40px;
  border: solid 1px black;
  width: 200px;
  height: 100px;
}
.dropdown-closed { display: none; }
.dropdown-open { display: block; }

和JS：

 $(document).ready(function(){
   $('body').on('click', '.dropdown_triger', function(e){
     var $wrapper = $(this).parent();
     var $content = $(this).next();
     var $triger = $(this);
     if($triger.hasClass('selected')){
       $(document).off('mouseup.dropdownDocClick');
       console.log('hasClass');
     }
     $triger.toggleClass('selected');
     $content.toggleClass('dropdown-closed dropdown-open');
     $(document).on('mouseup.dropdownDocClick',function (e){
       console.log('fire');
       if (!$wrapper.is(e.target) && $wrapper.has(e.target).length === 0){
         if($content.hasClass('dropdown-open')){
           $content.toggleClass('dropdown-closed dropdown-open');
           $(document).off('mouseup.dropdownDocClick');
         }
       }
     });
   });
 });

除了这个地方，一切都有效：

if($triger.hasClass('selected')){
    $(document).off('mouseup.dropdownDocClick');
    console.log('hasClass');
}

我希望mouseup事件不会再发生了，但确实如此。这是一个fiddle，试一试吧。如果我打开下拉列表，鼠标事件将附加到文档并继续触发，直到我单击外部容器，从而关闭下拉列表。

但如果我通过再次点击triger按钮（我的例子中的span）关闭下拉列表，事件不会被删除，我无法理解为什么？

如果另一个元素有某个类，如何删除Jquery事件？

0 个答案: