編集: 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 の例から変更されています。