jquery - Jquery 自定义下拉列表

Question

我在 jquery 上有自定义下拉列表，我的打开列表单击工作正常，但我需要通过单击正文来处理折叠单击按钮。

如何处理正文单击事件以折叠我的列表？

html

<div class="xn-dropdown">
<span class="select-button xn-select" >
    <span>select
    </span>

</span>
<div class="select-menu-wrap">
    <div class="select-menu-modal">
        <div class="select-menu-list">
            <div class="select-menu-item">

                <a href="#">itemnumber 1</a>                    
            </div>
            <div class="select-menu-item">
                <a href="#">itemnumber 1</a>

            </div>
            <div class="select-menu-item">

                <a href="#">itemnumber 1</a>
            </div>
        </div>
    </div>
</div>

javascript

$(document).on("click",".select-button",function() {
$(this).toggleClass('select-button').addClass('selected');
    $('.select-menu-wrap').show();

});



if(!$(".xn-select").hasClass('select-button')){
$(document).on("click","body",function() {    
    $('.xn-select').toggleClass('selected').addClass('select-button');
    $('.select-menu-wrap').hide();
});
}

和小提琴（现在工作正常！）

http://jsfiddle.net/qMMcN/6/

Answer 1

这是一个应该做的修改

http://jsfiddle.net/XKTsC/

$(document).on("click",".select-button",function(event) {
    $(this).toggleClass('select-button').addClass('selected');
    $('.select-menu-wrap').show();
    event.stopPropagation();
});

$(document).on("click","body",function() {    
    $('.xn-select.selected').removeClass('selected').addClass('select-button').next().hide();
});

您需要防止.select-button单击事件冒泡到body，否则主体单击处理程序将撤消按钮单击处理程序所做的更改

Answer 2

每次点击按钮如何切换？

$(document).on("click",".select-button",function() {
    $(this).toggleClass('selected');
    $('.select-menu-wrap').toggle();   
});

http://jsfiddle.net/qMMcN/2/

Answer 3

这是我的解决方案；

小提琴：http: //jsfiddle.net/qMMcN/5/

js只有一个功能

var open = false;

$(document).bind("click", function (event) {
    event.stopPropagation();
    var buttonClicked = $(event.target).hasClass('select-button');
    if (!open && buttonClicked) {
        $('.select-button').addClass('selected');
        $('.select-menu-wrap').show();
        open = true;
    } else {
        $('.select-button').removeClass('selected');
        $('.select-menu-wrap').hide()
        open = false;
    }
});