1

編集: GLK.net のリンクを試しましたが、これを機能させることができませんでした。それは単に私の機能を壊すでしょう。

私はスパン要素を持っており、クリックするとulが切り替わります(最初のクリック=表示/ 2番目のクリック=非表示)。

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