如何使用jquery添加点击函数删除类

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

下面是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'); 

    });

这使我通过点击要添加的类别 '下拉' 到.photos DIV .toggleMenu。我想再次单击.toggleMenu时删除“下拉”类。

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

来源

2013-03-17 David Barnes

这给一个镜头：

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

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

来源

2013-03-17 02:17:58

谢谢麦克。你的权利，我一直都有答案。我只是开始缠绕jquery，我很喜欢它！ – 2013-03-17 16:43:19

您可以toggleClass()尝试：

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

来源

2013-03-17 02:18:09 Jai

谢谢你的回应，Jai。奇迹般有效。 – 2013-03-17 16:44:17

在您单击处理程序，只需使用的toggleClass()代替addClass()

See

来源

2013-03-17 02:18:28 erlandsson

工作！谢谢。 – 2013-03-17 16:42:45

如何使用jquery添加点击函数删除类

回答

相关问题