dropdown menu jquery with add and remove class

Question

So i'm trying to make a jquery dropdown that adds and removes classes. It does work, but only once. If i try the dropdown again, it simply drops down and slides up right after. It's suppose to drop down after clicking a button and slide up after another click.

$(document).ready(function() {
        //dropdown menu function
        $(".menuDrop").click(function(){
            $(".nav").slideDown("slow");
            $(".menuDrop").addClass("btn-hover");
            $(".menuDrop").click(function(){
                $(".nav").slideUp("slow");
                $(".menuDrop").removeClass("btn-hover");
            });
        });
    });

The "btn-hover" class is meant to add the same css as it where in a hover state once the button is clicked.

--edit--

<div class="menu">
    <div class="col-lg-12">
        <button type="button" class="menuDrop btn btn-default btn-lg">
            <span class="glyphicon glyphicon-chevron-down"></span>
        </button>

        <ul class="nav">
            <li><a class="link" href="#">home</a></li>
            <hr>
            <li><a href="#">portfolio</a></li>
        </ul>
    </div>
</div>

Can you post the HTML that this goes with?

j08691
– j08691

2013-11-26 16:18:02 +00:00
Commented Nov 26, 2013 at 16:18 — j08691
– j08691, Commented Nov 26, 2013 at 16:18

BenMorel · Accepted Answer · 2014-01-05 20:06:03Z

1

Using slideToggle and toggleClass should help you achieve this, and with less code:

//dropdown menu function
$(".menuDrop").click(function(){
    $(".nav").slideToggle("slow");
    $(".menuDrop").toggleClass("btn-hover");
});

Here's a fiddle: http://jsfiddle.net/scesR/

Hope that helps!

edited Jan 5, 2014 at 20:06

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Nov 26, 2013 at 16:53

sarahholden

6507 silver badges17 bronze badges

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

1 Comment

Axll Over a year ago

Well, didn't think of toggleClass. Thanks! Works like a charm :)

Praveen · Accepted Answer · 2013-11-26 16:16:45Z

0

Bind it using change event, instead of click event.

$(".menuDrop").change(function(){
            $(".nav").slideDown("slow");
            $(".menuDrop").addClass("btn-hover");
            $(".menuDrop").click(function(){
                $(".nav").slideUp("slow");
                $(".menuDrop").removeClass("btn-hover");
            });
        });

answered Nov 26, 2013 at 16:16

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

Collectives™ on Stack Overflow

dropdown menu jquery with add and remove class

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related