0

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/

4

3 に答える 3

0

これが私の解決策です。

フィドル: http://jsfiddle.net/qMMcN/5/

js の関数は 1 つだけ

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;
    }
});
于 2013-07-10T00:49:23.313 に答える