切换显示/隐藏切换单击外部

时间:2012-08-22 19:45:15

标签: jquery click hide toggle show

编辑: 我尝试了GLK.net的链接,但我无法让这个工作。它只会破坏我的功能。

我有一个span元素,如果你点击它,它将切换一个ul(第一次点击=显示/第二次点击=隐藏)。

我希望如此,如果显示ul,用户应该能够在元素外部单击(因此,文档/ html)以隐藏列表。

这是我的代码:

btw,$('hmtl')。css('cursor','pointer');用于iOS。

(function($){

$.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
  • 的示例

1 个答案:

答案 0 :(得分:0)

请参考这个..可能这就是你要找的.. hiding an element on click of anything else on the page

希望这会有所帮助......