Question

我是jquery的新手，但我最近学到了很多东西。我正在尝试使用单击处理程序将一个类添加到div，然后在选中它时将其删除。不确定这是否是最好的方法，因为我遇到了麻烦。也许toggleClass会是一个更好的解决方案吗？

这是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>

这是最小的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');

    });

这使我可以通过单击.toggleMenu将类“下拉”添加到.photos div。我想在再次单击.toggleMenu时删除“下拉”类。

任何人都知道如何做到这一点？需要帮助。

Answer 1

试一试：

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

有趣的是，你在帖子中提到了这一点。你应该听听自己的意见！

Answer 2

您可以尝试toggleClass()：

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

Answer 3

在点击处理程序中，只需使用toggleClass()代替addClass()

See

如何使用jquery添加具有单击功能的类

3 个答案: