在使用jQuery添加类之后，如何通过单击功能删除该类

Question

I am new to jquery but I have been learning a lot lately. I am trying to add a class to a div with a click handler and then remove it when it is selected. Not sure if this is the best method as I am having trouble with it. Maybe toggleClass would be a better solution?

Here is the html:

   <nav>
        <div class="container">
            <a class="toggleMenu" href="#">Menu</a>
                <ul class="nav">
                    <li><a href="index.html">Barnes</a></li>

                    <li><a href="craig.html">Craig</a></li>

                    <li><a href="bennie-donna.html">Bennie & Donna</a></li>

                    <li><a href="peggy.html">Peggy</a></li>

                    <li><a href="tina.html">Tina</a></li>

                    <li><a href="bennie.html">Bennie</a></li>

                    <li><a href="debbie.html">Debbie</a></li>

                    <li><a href="david.html">David</a></li>

                </ul> 
        </div>  
    </nav> 

<div class="photos-wrap">
        <div class="photos">
            <img src="images/bennie/image1.jpg" alt="pic"/>
            <img src="images/bennie/image2.jpg" alt="pic"/>
            <img src="images/bennie/image3.jpg" alt="pic"/>
            <img src="images/bennie/image4.jpg" alt="pic"/>
            <img src="images/bennie/image5.jpg" alt="pic"/>
            <img src="images/bennie/image6.jpg" alt="pic"/>
            <img src="images/bennie/image7.jpg" alt="pic"/>
            <img src="images/bennie/image8.jpg" alt="pic"/>
            <img src="images/bennie/image9.jpg" alt="pic"/>
            <img src="images/bennie/image10.jpg" alt="pic"/>
        </div>
    </div>

Here is the minimal css:

.photos-wrap {
    position:absolute;
    top:400px;
}

.photos {
    margin:0 auto;
    width:60%;
    padding-bottom: 300px;
}

.photos img {
    position: relative;
    margin:-20px;
}

.toggleMenu {
    display:  none;
    background: #175E4C;
    text-decoration: none;
    padding: 10px 15px;
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    border: rgba(0, 0, 0, 0.8);

     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;

     background-image: linear-gradient(bottom, #175E4C 45%, #7BB5A5 100%);
    background-image: -o-linear-gradient(bottom, #175E4C 45%, #7BB5A5 100%);
    background-image: -moz-linear-gradient(bottom, #175E4C 45%, #7BB5A5 100%);
    background-image: -webkit-linear-gradient(bottom, #175E4C 45%, #7BB5A5 100%);
    background-image: -ms-linear-gradient(bottom, #175E4C 45%, #7BB5A5 100%);

    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.45, #175E4C),
    color-stop(1, #7BB5A5)
);
}

.drop-down {
    margin-top:280px;


And lastly the jquery:

$('.toggleMenu').click(function(){
    $('.photos-wrap').addClass('drop-down');

    }); 

This enables me to add the class 'drop-down' to the .photos div by clicking on the .toggleMenu. I want to remove the 'drop-down' class when the .toggleMenu is clicked again.

Anyone know how to accomplish this? Need help.

Answer 1

Give this a shot:

    $('.toggleMenu').click(function(){
        $('.photos-wrap').toggleClass('drop-down');
    }); 

Interestingly, you mention this in your post. You should listen to yourself!

Answer 2

You can try with toggleClass() :

$('.container').on('click', '.toggleMenu', function(){
   $('.photos').toggleClass('drop-down');
});

Answer 3

In your click handler, just use toggleClass() instead of addClass()

See