Slidetoggle jquery не работает

jQuery Slide Toggle не работает — решено

На первый клик он работает как положено:

1. класс изменился
2. содержание html изменено с «Показать . » на «Закрыть . »
3. область содержимого расширяется эффектом slideDown,

До сих пор хорошо.

На втором клике .

1. класс меняется
2. содержание html изменено с «Закрыть . » на «Показать . »
3. Область содержимого НЕ уходит, как ожидалось.

На третий щелчок, .

1. класс изменился
2. содержание html изменено
3. уже показанный контент повторно отображается с эффектом слайда.

Так что все работает, кроме 2-го клика, когда контент должен быть снова скрыт.

Вот HTML, на который он действует:

И единственный применимый CSS:

РЕДАКТИРОВАТЬ — я заменил свой код jquery на функционально эквивалентный код, представленный в ответе ниже, но проблема остается. Так что причина должна быть в другом месте. Я помню, этот код работал изначально, но потом он остановился. Я в тупике. Время раздеть все остальное по частям .

РЕДАКТИРОВАТЬ 2 — Так как ошибка должна быть в другом месте, я принимаю улучшение кода для моего jquery в качестве ответа. Спасибо.

Редактировать 3 — Нашел источник проблемы.

Внутри div #user_urls у меня есть серия OL со следующим css:

Каждый OL содержит список из 20 URL-адресов и предназначен для отображения в столько столбцов, сколько требуется для отображения всех URL-адресов.

Снятие поплавка: слева; на этих тегах OL проблема исчезнет.

Таким образом, наличие плавающего в содержимом, содержащемся в DIV, который отображается и скрывается, заставляет его вообще не скрываться. Почему это случилось?

РЕДАКТИРОВАТЬ 4: Добавление внутри DIV #user_urls позволяет скрыть действие правильно.

Источник

jQuery slideToggle () не работает на div с отображением: нет

Я создаю адаптивное меню, для которого я использую слайдтоггл. Есть элемент, который я нажимаю, чтобы вызвать slideToggle элемента .menu. HTML и CSS для этого элемента выглядят так:

Все CSS связаны с этими элементами:

Как видите, есть одна обертка для меню и кнопка, которая вызывает мобильное меню. Немного jquery, который включает slideToggle:

Дело в том, что slideToggle фактически запущен и что-то происходит. Также нет никаких ошибок вообще. Хотя меню не видно, и я не могу понять, почему, кто-нибудь знает, как это решить?

JSFiddle для проблемы:

3 ответа

На самом деле вы используете jquery alpha

Любой элемент с абсолютным позиционированием получит левое / верхнее положение тела, а не внутри блока, в котором он содержится. Таким образом, если вы хотите, чтобы он содержался в родительском элементе, то родительский элемент должен быть относительно позиционирован, а затем, если дочерний элемент абсолютно позиционирован, тогда левая / верхняя позиция будет вычислена в родительском контейнере.

Попробуйте применить z-index к .menu :

И если вы хотите поместить его в родительский элемент nav , то вы можете использовать элемент position:relative; для nav :

Обновления:

Я думаю, вы использовали альфа-версию jquery 3.0, которая все еще находится в разработке. Вы должны использовать 2.x или 1.x версии jquery, которые готовы к работе и могут быть загружены из jquery.

Когда вы используете javascript для изменения стиля, javascript помещает стиль в строку и удаляет стиль, но стили, определенные в таблицах CSS, все еще там и активны. Поэтому, когда он переключается, он удаляет встроенный стиль, но все равно будет отображаться: ни один в CSS. Следовательно, не отображается меню.

Удалите display: none; из CSS и добавьте его в строку, чтобы он не отображался при загрузке страницы:

Источник

jQuery метод .slideToggle()

Определение и применение

jQuery метод .slideToggle() позволяет плавно отобразить или скрыть выбранные элементы скользящим движением. Если элемент изначально отображается, то он будет скрыт, если элемент скрыт, то он будет отображен.

Значение CSS свойства display элемента сохраняются и восстанавливаются при необходимости. Например, если элемент имеет значение этого свойства inline , то при отображении элемента, после того как он был скрыт, значение свойства не изменится и будет по прежнему inline .

Обращаю Ваше внимание, что метод .slideToggle() производит анимацию только высоты элемента (height), а метод .toggle(), используемый с параметрами анимирует свойства width (ширина), height (высота) и opacity (прозрачность). Метод .toggle() используемый без параметров в отличии от метода .slideToggle() не производит никакой анимации.

jQuery синтаксис:

Добавлен в версии jQuery

Значения параметров

Параметр	Описание
duration	Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться. Значение по умолчанию 400 (в миллисекундах). Строковые ключевые слова ‘fast’ и ‘slow’ соответствуют 200 и 600 миллисекундам соответственно (высокие значения указывают на медленную анимацию, а более низкие на быструю).
easing	Ключевое слово (строка), которое опряеделяет кривую скорости для анимации (используется математическая функция — кубическая кривая Безье). Без использования внешних плагинов имеет только два значения — linear (эффект анимации с одинаковой скоростью от начала до конца) и swing (эффект анимации имеет медленный старт и медленное окончание, но скорость увеличивается в середине анимации). Значение по умолчанию swing.
complete	Функция, которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента. Внутри функции, переменная this ссылается на DOM элемент к которому применяется анимация.
options	duration (по умолчанию: 400). Тип: Number , или String . Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться (смотри выше). easing (по умолчанию: swing). Тип: String . Ключевое слово (строка), которое определяет кривую скорости для анимации (смотри выше). queue (по умолчанию: true). Тип: Boolean , или String . Логическое значение, которое указывает следует ли размещать анимацию в очереди эффектов. Если указано false , то анимация начнется сразу же. С версии jQuery 1.7 опция queue также может принимать строку, в этом случае анимация будет добавлена к очереди, представленной этой строкой. Когда используется пользовательское имя очереди анимации, то она не запускается автоматически, вы должны при этом использовать метод .dequeue( » имя очереди » ), чтобы запустить её. specialEasing. Тип: PlainObject . Объект, содержащий одно или несколько свойств CSS, определенных параметром свойства и соответствующие им функции замедления. Добавлено в версии 1.4. step. Тип: Function ( Number now, Tween tween ). Функция вызывается для каждого анимируемого свойства каждого анимированного элемента. Эта функция дает возможность изменять Tween Object, чтобы изменить значение свойства, прежде чем оно будет установлено. progress. Тип: Function . Функция, которая будет вызываться после каждого шага анимации, только один раз для каждого анимированного элемента, независимо от количества анимированных свойств. Добавлено в версии 1.8. complete. Тип: Function . Функция (callback), которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента (смотри выше). start. Тип: Function ( Promise Object animation). Функция, вызывается, когда анимация элемента начинается. Добавлено в версии 1.8. done. Тип: Function ( Promise Object animation, Boolean jumpedToEnd). Функция вызывается, когда анимация элемента завершается. Добавлено в версии 1.8. fail. Тип: Function ( Promise Object animation, Boolean jumpedToEnd). Функция вызывается, когда анимацию элемента не удается завершить. Добавлено в версии 1.8. always. Тип: Function ( Promise Object animation, Boolean jumpedToEnd). Функция вызывается, когда анимация элемента завершается или останавливается незавершенной. Добавлено в версии 1.8.

Пример использования

В этом примере с использованием jQuery метода .toggle() мы при нажатии на определенную кнопку скрываем, или отображаем выбранные элементы

Результат нашего примера:

Пример использования jQuery методов .toggle() и .slideToggle() (без параметров)

Рассмотрим следующий пример в котором зададим методам .toggle() и .slideToggle() различные значения продолжительности анимации:

В этом примере с использованием jQuery методов .toggle() и .slideToggle() мы при нажатии на определенную кнопку скрываем, либо отображаем все элементы

Результат нашего примера:

Пример использования jQuery методов .toggle() и .slideToggle() (различная скорость анимации).

Рассмотрим следующий пример в котором зададим методам .toggle() и .slideToggle() не только продолжительность анимации, но и укажем скорость анимации и функцию, которая будет выполнена после завершения анимации:

В этом примере с использованием jQuery методов .toggle() и .slideToggle() мы при нажатии на определенную кнопку скрываем, либо отображаем все элементы

Результат нашего примера:

Пример использования jQuery методов .toggle() и .slideToggle() (с callback функцией).

Рассмотрим следующий пример в котором передадим в качестве параметра методов .toggle() и .slideToggle() объект, содержащий различные опции, которые будут контролировать анимацию:

В этом примере с использованием jQuery методов .toggle() и .slideToggle() мы при нажатии на определенную кнопку скрываем, либо отображаем все элементы

• продолжительность анимации равную 800 миллисекунд (duration: 800)
• эффект анимации происходит с одинаковой скоростью от начала до конца (easing: linear)
• функция, которая после завершения анимации выводит в консоль браузера информацию о завершении выполнения метода для каждого элемента в наборе совпавших элементов (complete: function).
• анимация не размещается в очереди эффектов (queue: false).

Результат нашего примера:

Пример использования jQuery методов .toggle() и .slideToggle() (объект с опциями в качестве параметра). jQuery эффекты

Источник

.slideToggle()

.slideToggle( [duration ] [, complete ] ) Returns: jQuery

Description: Display or hide the matched elements with a sliding motion.

version added: 1.0 .slideToggle( [duration ] [, complete ] )

version added: 1.0 .slideToggle( options )

version added: 1.4.3 .slideToggle( [duration ] [, easing ] [, complete ] )

The .slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed. If an element has a display value of inline , then is hidden and shown, it will once again be displayed inline . When the height reaches 0 after a hiding animation, the display style property is set to none to ensure that the element no longer affects the layout of the page.

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings ‘fast’ and ‘slow’ can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

We can animate any element, such as a simple image:

We will cause .slideToggle() to be called when another element is clicked:

With the element initially shown, we can hide it slowly with the first click:

Figure 1 — Illustration of the slideToggle() effect when hiding the image

A second click will show the element once again:

Figure 2 — Illustration of the slideToggle() effect when showing the image

Easing

As of jQuery 1.4.3, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing , and one that progresses at a constant pace, called linear . More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

Callback Function

If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

As of jQuery 1.6, the .promise() method can be used in conjunction with the deferred.done() method to execute a single callback for the animation as a whole when all matching elements have completed their animations ( See the example for .promise() ).

Additional Notes:

• All jQuery effects, including .slideToggle() , can be turned off globally by setting jQuery.fx.off = true , which effectively sets the duration to 0. For more information, see jQuery.fx.off.
• If .slideDown() is called on an unordered list (
  ) and its
  • elements have position (relative, absolute, or fixed), the effect may not work properly in IE6 through at least IE9 unless the
    has «layout.» To remedy the problem, add the position: relative; and zoom: 1; CSS declarations to the ul .

    Examples:

    Animates all paragraphs to slide up or down, completing the animation within 600 milliseconds.

    Источник

    Читайте также:  Приложение частичный экран не работает