如何使用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添加點擊函數刪除類

回答

相關問題