CODEWITHSUNDEEP
jquerydrop-down-menu
qwaz
qwaz

Reputation: 1305

jQuery drop down menu .slideUp() not working

I have two divs with a jQuery drop down menu. When I click anywhere on a document an active menu slides up, but when I click on another div with the jQuery drop-down menu, the previously opened menu remains open.

HTML (example)

<div id="menu-act" class="menu-button">
<ul class="no-js">
    <li>
    <a id="btnclick" class="actions">Actions</a>
    <ul class="action-options">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        </ul>
    </li>
</ul>
</div>
<div id="menu-act2" class="menu-button">
<ul class="no-js">
    <li>
    <a id="btnclick2" class="actions">Actions</a>
    <ul class="action-options">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        </ul>
    </li>
</ul>
</div>

JQuery (example)

$(function() {
        $("#menu-act > ul").toggleClass("no-js js");
        $("#menu-act .js ul").hide();
        $("#menu-act .js").click(function(e) {
            $("#menu-act .js ul").slideToggle(100);
            $("#btnclick").toggleClass("active");
            e.stopPropagation();
        });
    $("#menu-act2 > ul").toggleClass("no-js js");
        $("#menu-act2 .js ul").hide();
        $("#menu-act2 .js").click(function(e) {
            $("#menu-act2 .js ul").slideToggle(100);
            $("#btnclick2").toggleClass("active");
            e.stopPropagation();
        });
        $(document).click(function() {
        if ($('.menu-button .js ul').is(':visible')) {
            $('.menu-button .js ul', this).slideUp(10);
            $('.actions').removeClass('active');
        }
    });

});

Demo: http://jsfiddle.net/56ycx/1/

How do I make any previously open menu hide when I click another drop-down menu?

Upvotes: 0

Views: 355

Answers (2)

SarathSprakash
SarathSprakash

Reputation: 4624

DEMO

I think its simple as it is

Try this

$(function () {
    $(".menu-button .action-options").hide();
    $(".menu-button ul a").click(function (e) {
      $(".menu-button .action-options").hide();
     $(this).parents('ul').find('.action-options').toggle();
        e.stopPropagation();
    });

    $(document).click(function (e) {

        $(".menu-button .action-options").hide();
        return true;
    });
});

Edited code according to OP requirement

DEMO

Try this new code,according to the requirement mentioned.

$('.menu-button .action-options').hide();
$('.menu-button .actions').click(function (e) {
    if ($(this).parents('ul').find('.action-options').is(':visible')) {

        $(this).parents('ul').find('.action-options').slideUp(10);
        $('.actions').removeClass('active');
    } else {
        $('.menu-button .action-options').slideUp(10);
        $(this).parents('ul').find('.action-options').slideDown(10);
        $('.actions').addClass('active');
    }
    e.stopPropagation();
});
$(document).click(function (e) {

    $(".menu-button .action-options").hide();
    return true;
});

Hope this helps ,Thank you

Upvotes: 1

Andre Figueiredo
Andre Figueiredo

Reputation: 13425

Something like this...

$('.DropDownMenu li').click(function() {
    var $that = $(this);

    // Slides Up, all menu items, and removes class active on Complete.
    $('.DropDown .MenuItem li').slideUp(10, function(){
         $that.removeClass('active');
    });

    // Slides Down, clicked menu item, and adds class "active" on Complete.
    $that.slideDown(10, function(){
         $that.addClass('active');
    });
});

Upvotes: 1

Related Questions