javascript - jquery toggleClass only works once - Stack Overflow

admin管理员组

文章数量:1332881

This script makes it so when you click on a <div> another <div> appears by adding class log_in_box_dd to #big_ul_hide. Once #big_ul_hide has that class, clicking anywhere (except the #big_ul_hide will remove that class, thus hiding it. So you click to see a pop-up div, then click anywhere but that div should hide it.

This whole thing works, but only once. After that it gets really weird.
After it's added and then removed, inspecting elements will read <div id="big_ul_hide" class="">. I can't get the class to re-add.

I have added the setTimeout function so it won't doesn't remove the class immediately when .lin_und is clicked.

So, why is it not letting me re-add the class? If I alert(...) after the .toggleclass it will alert every time, but still not apply the class.

fiddle: /

<script>
$('.lin_und').click(function() {
    $('#big_ul_hide').toggleClass('log_in_box_dd');
});
setTimeout(function() {      
    $('html').click(function() {
        if($('#big_ul_hide').hasClass('log_in_box_dd')) {
            $('#big_ul_hide').removeClass('log_in_box_dd');
        }
    });
    $('#big_ul_hide').click(function(event) {
        event.stopPropagation();
    });
}, 2000);
</script>

This script makes it so when you click on a <div> another <div> appears by adding class log_in_box_dd to #big_ul_hide. Once #big_ul_hide has that class, clicking anywhere (except the #big_ul_hide will remove that class, thus hiding it. So you click to see a pop-up div, then click anywhere but that div should hide it.

This whole thing works, but only once. After that it gets really weird.
After it's added and then removed, inspecting elements will read <div id="big_ul_hide" class="">. I can't get the class to re-add.

I have added the setTimeout function so it won't doesn't remove the class immediately when .lin_und is clicked.

So, why is it not letting me re-add the class? If I alert(...) after the .toggleclass it will alert every time, but still not apply the class.

fiddle: http://jsfiddle/NQxAC/

<script>
$('.lin_und').click(function() {
    $('#big_ul_hide').toggleClass('log_in_box_dd');
});
setTimeout(function() {      
    $('html').click(function() {
        if($('#big_ul_hide').hasClass('log_in_box_dd')) {
            $('#big_ul_hide').removeClass('log_in_box_dd');
        }
    });
    $('#big_ul_hide').click(function(event) {
        event.stopPropagation();
    });
}, 2000);
</script>

• javascript
• jquery
• toggleclass

Share Improve this question Follow edited Apr 2, 2014 at 15:08 Skwal 2,15822 gold badges2020 silver badges3030 bronze badges asked Apr 2, 2014 at 14:51 Ghost EchoGhost Echo 2,06755 gold badges3333 silver badges4646 bronze badges 7

• why is click handler inside setTimeout.Please take them out of crap – Deepak Ingole Commented Apr 2, 2014 at 14:54
• And why are you nesting handlers here? (in your jsFiddle at least...) – A. Wolff Commented Apr 2, 2014 at 14:54
• Is this what you're after jsfiddle/j08691/NQxAC/2? – j08691 Commented Apr 2, 2014 at 14:55
• @j08691 yes, please post an answer with description and I'll try it to out, then accept. – Ghost Echo Commented Apr 2, 2014 at 14:57
• Why is the marked down? I met the requirements. – Ghost Echo Commented Apr 2, 2014 at 14:58

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 3

You need to stop event bubbling initially and move the click event handler on html out from the inner click handler so it exists one it own (otherwise you're repeatedly binding the click event). Try using:

$('.lin_und').click(function (e) {
    e.stopPropagation();
    $('#big_ul_hide').toggleClass('log_in_box_dd');
    $('#big_ul_hide').click(function (event) {
        event.stopPropagation();
    });
});
$('html').click(function () {
    $('#big_ul_hide').removeClass('log_in_box_dd');
});

jsFiddle example

if you dont stop bubbling on .lin_und with bubble up to html which will trigger its click event handler. you dont need the setTimeout. I would try something like this:

$('.lin_und').on('click', function (evt) {

    evt.stopPropagation();
    $('#big_ul_hide').toggleClass('log_in_box_dd');

});

$('html').on('click', function () {

    $('#big_ul_hide').removeClass('log_in_box_dd');

});

$('#big_ul_hide').on('click', function (evt) {

    evt.stopPropagation();

});

see it working here: Demo

Do you want the blue box to be the only one who shows up the hidden div? if so then change .toggleClass() to .removeClass() on the html click handler

I'm not quite sure whether I understood your requirements pletely, but look at this: http://jsfiddle/NQxAC/1/

$('.lin_und').click(function() {                
    $('#big_ul_hide').toggleClass('log_in_box_dd');             
});
$('body').click(function(e) {
    if (!$(e).target().is('.lin_und'))
        $('#big_ul_hide').removeClass('log_in_box_dd');                 
});

Clicking on the upper div will toggle the lower one. Clicking anywhere else will hide the first one.

本文标签： javascriptjquery toggleClass only works onceStack Overflow