切換顯示/隱藏未點擊外部

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

希望這有助於。 ..