1

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

我有一个 span 元素，如果单击它，它将切换 ul（第一次单击 = 显示/第二次单击 = 隐藏）。

我想要这样，如果显示 ul，用户应该能够单击元素外部（因此，文档/html）来隐藏列表。

这是我的代码：

顺便说一句， $('hmtl').css('cursor', 'pointer'); 用于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 上的示例
4

0 回答 0