Функция переключения jQuery .click()

#javascript #jquery #toggle #jquery-events

#javascript #jquery #переключение #jquery-события

Вопрос:

Я не уверен, нужен ли мне этот «обратный вызов» или нет, но в основном я пытаюсь эмулировать отмену функции, например, в эффекте .hover() с эффектом .click() . Возможно ли это. Таким образом, в принципе, если пользователь снова нажмет на ссылку, произойдет обратное тому, что только что произошло, то есть закрытие div, а не открытие. Возможно ли это сделать с помощью .click()?

 $(document).ready(function(){
    $('.content_accrd').css({"height":"0px"});
$('.paneltop').click( function() {
    $(this).css({"background-position":"0px -21px"})
    .siblings().animate({"height":"100px"}, 200)
}, function() {
$(this).css({"background-position":"0px 0px"})
    .siblings().animate({"height":"0px"}, 200);

})
})
  

Ответ №1:

Использовать .toggle() , а не .click() .

Описание: Привязать два или более обработчиков к соответствующим элементам, которые будут выполняться при альтернативных щелчках.

Комментарии:

1. Кроме того, это технически то, что я хотел? обратный вызов? или это называется как-то иначе?

2. Я не думаю, что «обратный вызов» — это термин для того, что вы хотели. Обратный вызов (во всяком случае, в JavaScript) — это функция, которая будет выполнена позже. Все 3 анонимные функции в вашем коде являются примерами обратных вызовов. Первый — это обратный вызов, который выполняется, когда DOM готов.

3. Краткое описание обратных вызовов JS: recurial.com/programming/… (статья в Википедии может быть немного непрозрачной …)

4. .toggle() устарел с версии 1.8 — вместо этого используйте условные выражения (if..else ..)

Ответ №2:

попробуйте переключить

 $(".paneltop").toggle(function(){
    //first click happened
},function(){
    //second click happened
});
  

Комментарии:

1. Может ли кто-нибудь объяснить свой отрицательный голос, чтобы я мог улучшить свой ответ?

2. Это был бы мой минус — извините, я собирался прокомментировать, но отвлекся. Я отклонил ваш первоначальный ответ, потому что он был просто неправильным. Почему вы просто не отредактировали его? В любом случае, это была та же информация, что и мой ответ, после того, как я уже опубликовал (и отклонил ваш неправильный ответ).

3. @MattBall: я удалил его, потому что за него давным-давно проголосовали против, и шансы получить одобрение очень малы.

4. Было 2 отрицательных голоса. Один из них был моим. Я рад удалить отрицательные голоса, когда ответ будет исправлен. Я полагаю, что ваш другой downvoter сделал бы то же самое.

5. @MattBall: Хорошо. Так в чем же причина того, что вы все еще сохраняете свой негативный отзыв на моем посте сейчас?

Ответ №3:

Нет, действие щелчка всегда будет делать то же самое. Если вы хотите, чтобы он имел переменные эффекты, вам нужно будет проверить текущее состояние элемента и соответствующим образом переключить его в новое состояние.

Это выглядит примерно так:

   $('#foo').click(function () {
    if ( $('#foo').is(':visible') ) {
      $('#foo').hide();
    } else {
      $('#foo').show();
    }
  });
  

В зависимости от эффекта, которого вы пытаетесь достичь, это может быть любое изменение, которое вы хотите.

Комментарии:

1. 1. Где вы видите элемент с идентификатором foo ? 2. Почему вы когда-либо использовали это вместо .toggle() ? -1.

2. 1. Просто демонстрация, которая может быть применена к любому элементу (элементам). 2. Да, читая вопрос OP, они специально запрашивают возможность отменить действие (аналогично эффектам наведения курсора мыши). Это может быть не обязательно переключатель «показать / скрыть», а любой другой переключатель. И может быть вызвано несколькими запускающими элементами, нам нужно отслеживать текущее состояние элемента.

3. Переключение не будет работать, если на странице есть более одного элемента, который может вызвать изменение состояния. Единственный способ убедиться в этом — запросить текущее состояние и переключиться в противоположное состояние. Извините, что вы считаете, что это неверно и стоит понижения. Но каждый имеет право на свое мнение.