Toggle показать/скрыть при нажатии с помощью jQuery

Я получил элемент div, поэтому, когда я нажимаю на него, другой div, который скрыт по умолчанию, скользя и отображается, вот код самой анимации:

$('#myelement').click(function(){
     $('#another-element').show("slide", { direction: "right" }, 1000);
});

Как я могу это сделать, когда я нажимаю на #myelement еще раз (когда элемент уже показан), он будет скрывать #another-element следующим образом:

$('#another-element').hide("slide", { direction: "right" }, 1000);?

В принципе, он должен работать точно так же, как slideToggle, но с функциями show/hide. Возможно ли это?

Ответ 1

Событие toggle устарело в версии 1.8 и удалено в версии 1.9

~~Попробуйте это...~~

$('#myelement').toggle(
   function () {
      $('#another-element').show("slide", {
          direction: "right"
      }, 1000);
   },
   function () {
      $('#another-element').hide("slide", {
          direction: "right"
      }, 1000);
});

Примечание. Эта подпись метода устарела в jQuery 1.8 и удалена в jQuery 1.9. jQuery также предоставляет метод анимации с именем .toggle(), который переключает видимость элементов. Является ли анимация или метод события, зависит от набора аргументов прошло, jQuery docs.

Метод .toggle() предоставляется для удобства. Это относительно просто осуществить одно и то же поведение вручную, и это может если предположения, встроенные в .toggle(), оказываются предельными. Например,.toggle() не гарантированно работает правильно, если применяется дважды к одному элементу. Поскольку .toggle() внутренне использует щелчок обработчик для выполнения своей работы, мы должны отменить щелчок, чтобы удалить поведение с помощью .toggle(), поэтому другие обработчики кликов могут быть пойманы в перекрестный огонь. Реализация также вызывает .preventDefault() на событие, поэтому ссылки не будут выполняться, и кнопки не будут нажаты если для элемента был вызван .toggle(), jQuery docs

Вы переключаете между видимостью с помощью show и hide с помощью щелчка. Вы можете поместить условие на видимость, если элемент виден, а затем скрыть его. Примечание: вам понадобится jQuery UI, чтобы использовать эффекты добавления с помощью show/hide like direction.

Live Demo

$( "#myelement" ).click(function() {     
    if($('#another-element:visible').length)
        $('#another-element').hide("slide", { direction: "right" }, 1000);
    else
        $('#another-element').show("slide", { direction: "right" }, 1000);        
});

Или просто используйте переключатель вместо щелчка. Используя toggle, вам не потребуется условие (if-else). как было предложено Т.Д.Кроудером.

Live Demo

$( "#myelement" ).click(function() {     
   $('#another-element').toggle("slide", { direction: "right" }, 1000);
});

Ответ 2

Использовать функцию jquery toggle, выполняющую задачу для вас

. toggle() - отображать или скрывать согласованные элементы.

$('#myelement').click(function(){
      $('#another-element').toggle('slow');
  });

Ответ 3

Вы можете использовать функцию .toggle() вместо .click()....

Ответ 4

Вы можете использовать этот код для переключения элемента var ele = jQuery ( "yourelementid" ); ele.slideToggle( 'медленно'); это будет работать для вас:)

Ответ 5

это будет работать для u

   $("#button-name").click(function(){
        $('#toggle-id').slideToggle('slow');
    });

Ответ 6

$(document).ready( function(){
  $("button").click(function(){
    $("p").toggle(1000,'linear');
  });
});

Live Demo