Как удалить класс с функцией щелчка после того, как он был добавлен с 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. Я хочу удалить класс «drop-down», когда снова щелкнут .toggleMenu.

Кто-нибудь знает, как это осуществить? Нужна помощь.

источник

2013-03-17 David Barnes

Дайте этот выстрел:

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

Интересно, что Вы упоминаете это в вашем посте. Вы должны слушать себя!

источник

2013-03-17 02:17:58

Спасибо Майк. Твое право, я отвечал все время. Я только начинаю обнимать jQuery, и я люблю его! –

Вы можете попробовать с toggleClass():

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

источник

2013-03-17 02:18:09 Jai

Спасибо за ваш ответ, Джай. Работает как шарм. –

В обработчике щелчка, просто используйте toggleClass() вместо addClass()

See

источник

2013-03-17 02:18:28 erlandsson

Это сработало! Спасибо. –

Как удалить класс с функцией щелчка после того, как он был добавлен с jquery

ответ

Смежные вопросы