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

Question

При первом клике все работает как положено:

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

Хорошо, пока.

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

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

При третьем щелчке ...

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

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

Вот jQuery:

-

$('.open_user_urls').live('click', function() {
    $('#user_urls').slideDown('slow');
    $(this).addClass('close_user_urls');
    $(this).removeClass('open_user_urls');
    $(this).html('Close Search History');
    return false;
});

$('.close_user_urls').live('click', function() {
    $('#user_urls').slideUp('slow');
    $(this).addClass('open_user_urls');
    $(this).removeClass('close_user_urls');
    $(this).html('Show Search History');
    return false;
}); 

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

<h3 class='open_user_urls'>Show Search History</h3>
<div id='user_urls'>
// an OL tag with content
</div>

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

#user_urls { display: none; }

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

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

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

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

.url_list {float: left; width: 285px; list-style-position: outside; margin-left: 25px;}

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

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

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

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

Answer 1

Чтобы повторить проблему и решить этот вопрос ...

Внутри #user_urls DIV была серия тегов OL, каждая из которых была перемещена влево. Проблема была вызвана поплавком.

Добавление <br style='clear: left;' /> в #user_urls DIV решило проблему.

Answer 2

Может быть, что-то вроде этого будет проще?

$(".open_user_urls").toggle(
    function () {
        $(this).text("Close Search History").siblings(".user_urls").slideDown("slow");
    },
    function () {
        $(this).text("Show Search History").siblings(".user_urls").slideUp("slow");
    }
);

Функция переключения предназначена именно для сценария, с которым вы сталкиваетесь.

Answer 3

С тех пор, как этот вопрос был открыт, jQuery исправил это самостоятельно.

Обновление до последней версии jQuery решило проблему для нас без изменений CSS. (jQuery 1.4.4 по состоянию на 9 декабря 2010 г.)

В результате обсуждения Группы Google , в свою очередь, из ответа d12 . Согласно duscussion, в некоторых версиях jQuery 1.3x эта ошибка затрагивала несколько действий: slideUp, fadeOut и toggle, если скрытый / скользящий элемент является неплавающим родителем, содержащим плавающие дочерние элементы.

Answer 4

Из того, что я обнаружил, jQuery нужно установить стиль высоты, чтобы правильно его двигать. Обходной путь, который я использовал, - установить высоту, прежде чем сдвинуть ее.

$('#user_urls').css('height', $('#user_urls').height() + 'px');

После того, как вы установите его один раз, он должен работать правильно с тех пор. Проверьте этот урок для более подробного объяснения.

Answer 5

Добавление неразрывного пробела в ваш div - это еще одно решение, похожее на предложенное The Reddest, которое помогло мне решить аналогичную проблему.

Answer 6

Спасибо за этот вопрос. Это действительно помогло мне разобраться в проблеме переключения элемента с плавающими детьми.

Другой ресурс, который действительно помог и немного объясняет поведение, можно найти в этом обсуждении группы Google.

Answer 7

Я не могу продублировать вашу ошибку. Я использовал ваш точный код и не могу повторить вашу проблему.

Это должна быть ошибка скрипта из другого места в вашем коде JS.

Answer 8

Я думаю, что ответ Конора может поставить вас на правильный путь. Я мог бы также предложить slideToggle и toggleClass:

http://docs.jquery.com/Attributes/toggleClass

http://docs.jquery.com/Effects/slideToggle

Я мог бы быть таким же простым, как:

$("h3.open_user_urls").click(function () { 
      next("div#user_urls").slideToggle(); 
});