CODEWITHSUNDEEP
jqueryhtml
Timur Shahbanov
Timur Shahbanov

Reputation: 425

Jquery custom dropdownlist

I have custom dropdownlist on jquery and my open-list click works fine, but i need to handle collapse click on button with click on body.

How can i handle a body click event to collapse my list ?

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();
});
}

and fiddle(now works fine!)

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

Upvotes: 0

Views: 563

Answers (3)

erdimeola
erdimeola

Reputation: 854

Here's my solution for this;

fiddle: http://jsfiddle.net/qMMcN/5/

just one function for 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;
    }
});

Upvotes: 0

Dom Day
Dom Day

Reputation: 2562

here's a modification that should do it

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();
});

You need to prevent the .select-button click event from bubbling up to the body, or the body click handler will undo the changes made by the button click handler

Upvotes: 2

Robert Hoffmann
Robert Hoffmann

Reputation: 2416

How about just toggling on clicking the button each time ?

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

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

Upvotes: 0

Related Questions