切换显示/隐藏未点击外部

Question

编辑：我试过GLK.net的链接，但我无法设法得到这个工作。它只会打破我的功能。

我有一个span元素，如果你点击它，它会切换一个ul（第一个click = show/second click = hide）。

我希望如此，如果显示的是ul，用户应该能够点击元素外部（如文档/ html）来隐藏列表。

这里是我的代码：

顺便说一句，在$（ 'HMTL'）的CSS（ '光标'， '指针'）;用于iOS。

（函数（$）{

$.fn.styledDropdown = function() { 

    var obj = $('#tag-cloud'); 

    obj.find('.field').click(function() { // onclick event, show wp-tag 

     if (obj.find('.wp-tag-cloud').is(':hidden')) { 

      obj.find('.wp-tag-cloud').show(); 
      obj.find('i').attr('class', 'icon-eqtri-up'); 
      $('html').css('cursor', 'pointer'); 

      $(document).keyup(function(event) { // keypress event, hide wp-tag list 

       if(event.keyCode == 27) { 
        obj.find('.wp-tag-cloud').hide(); 
        obj.find('i').attr('class', 'icon-eqtri-down'); 
        $('html').css('cursor', 'default'); 
       } 

      }); 

     } else { 

      obj.find('.wp-tag-cloud').hide(); 
      obj.find('i').attr('class', 'icon-eqtri-down'); 
      $('html').css('cursor', 'default'); 

     } 

    }); 

    obj.find('.wp-tag-cloud li a').click(function() { // onclick event, change field value with selected list item and show list 

     obj.find('.field').html($(this).html() + '<i class="icon-eqtri-down"></i>'); 
     obj.find('.wp-tag-cloud').hide(); 
     $('html').css('cursor', 'default'); 

    }); 

}; 

}）（jQuery的）;

任何帮助，这将不胜感激。

• 代码已被改编自一个例子，在css-tricks.com

Answer 1

请参阅本..也许这是你在寻找什么.. hiding an element on click of anything else on the page

希望这有助于。 ..