Jquery custom dropdownlist

Question

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/

Dom Day · Accepted Answer · 2013-07-10 00:42:06Z

2

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

answered Jul 10, 2013 at 0:42

Dom Day

2,56215 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Robert Hoffmann Over a year ago

Nice catch. Both binding to document made me go grrrr :)

Brombomb Over a year ago

What I like to do is register the click function inside the function that shows the menu, but registering it with the one api.jquery.com/one method which means it won't catch every single click just the first click after opening the menu.

Robert Hoffmann · Accepted Answer · 2013-07-10 00:24:17Z

0

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/

answered Jul 10, 2013 at 0:24

Robert Hoffmann

2,43622 silver badges30 bronze badges

2 Comments

Timur Shahbanov Over a year ago

i need to collapse list on body click !

Robert Hoffmann Over a year ago

Here, this is no good (since both bind to document) but it might get you started, i'm off to bed ! jsfiddle.net/qMMcN/4

erdimeola · Accepted Answer · 2013-07-10 00:49:23Z

0

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

answered Jul 10, 2013 at 0:49

erdimeola

8548 silver badges17 bronze badges

2 Comments

Timur Shahbanov Over a year ago

you have problem with second click on button

erdimeola Over a year ago

Works perfectly at chrome. which browser are you using?

Collectives™ on Stack Overflow

Jquery custom dropdownlist

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related