Как остановить jQuery слайд-тумблер йо-йо? - PullRequest
Новая
       0

Как остановить jQuery слайд-тумблер йо-йо?

2 голосов
/ 15 декабря 2011

Я новичок в jQuery, но похоже, что он должен работать просто отлично: 

$(document).ready(
    function()
    {
        $("#btn_toggle_transcript").click(
            function()
            {
                $("#transcript_container").slideToggle(1000);
            }       
        );
    }
);

... и он работает, но не правильно.... по крайней мере, не так, как ожидалось ...

Правильно ли я предположил, что приведенный выше код добавит обработчик кликов к элементу с идентификатором "btn_toggle_transcript"?Этот обработчик кликов будет реагировать на щелчок, открывая целевой div (... с идентификатором «transcript_container»), если он закрыт, или закрывая его, если он открыт?

Что такоев настоящее время происходит следующее: нажатие кнопки действительно делает слайд div открытым.НО, когда он полностью открыт, он НЕМЕДЛЕННО - и без пользовательского ввода - снова закрывает слайды.

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

Может ли кто-нибудь, пожалуйста, сказать мне, почему мой div закрывается сам по себе?

HTML-код для кнопки: 

<div id="tools_button_container">
    <div class="tools_button" id="btn_toggle_transcript"></div>
</div>

HTML-код для скользящего div (содержимое задается динамически): 

<div id="transcript_container">
    <div id="transcript_contents"></div>
</div>

И CSS: 

#transcript_container{
z-index:4;
position:absolute;
width:290px;
max-height:455px;
top:51px;
right:-2px;
background-color:#90B2D8;
padding:20px 10px 10px 10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
display:none;
}

#transcript_contents{
max-height:375px;
overflow:auto;
margin:20px 0px 10px 0px;
background-color:#ffffff;
padding:0px 5px 0px 5px;
}

#btn_toggle_transcript {
background: url('images/transcript.png') no-repeat 0 0;
display:block;
}

#circle_btn_toggle_transcript:hover {
background-position: 0px -50px;
}

==========

РЕДАКТИРОВАТЬ:

Я сделал три вещи, которые, кажется, помогли.Почему они работают, я не знаю, но они делают.

1) Drupal 6.x использует старую версию jQuery (1.2.2).Есть модуль для обновления до 1.3.2.Я заменил файлы обновления 1.3.2 на файлы 1.7.1, и теперь мои отчеты DOM используют v1.7.1 из jQuery.

2) & 3) Несмотря на то, что я связываюсь только с событием click ОДИН РАЗ (проверено путем удаления привязки и отсутствия каких-либо действий при нажатии кнопки), я решил попробовать добавить строку, чтобы удалить мою «фантомную» привязку, прежде чем добавить фактическую привязку.Основываясь на моем чтении, я решил использовать рекомендованные методы on () и off () для добавления / удаления привязок.Моя функция ready () теперь выглядит следующим образом: 

$(document).ready(
function(){
    $("body").off("click", "#btn_toggle_transcript");
    $("body").on("click", "#btn_toggle_transcript",
        function(){
            $("#transcript_container").slideToggle(1000);
        }
    );
}
);

Теперь мой скользящий элемент div открывается и остается открытым до тех пор, пока я снова не закрою его.Yay!

Большое спасибо всем, кто ответил / прокомментировал.Ваши предложения и рекомендации помогли мне найти решение.

Приветствия!

ОБНОВЛЕНИЕ: Как я уже упоминал в одном из комментариев, это работает внутри Drupal.Как также упоминалось, если я закомментировал единственную привязку, никаких действий не вызывалось.Мое рассуждение состояло в том, что, поскольку удаление ОДНОЙ привязки перестало вызывать действие, тогда не было никакой возможности, чтобы его связывали дважды ...

DUMB!

Хотя я был прав, что былотолько один блок кода привязки, я полностью забыл, что мой модуль уже добавляет мой js-файл на страницу.Поскольку мне нужно также развернуть свой контент в не-друпских средах, я также вручную добавил файл js на свою страницу.... два включения означают две привязки.... через несколько дней я никогда не вернусь!

Ответы [ 3 ]

3 голосов
/ 15 декабря 2011

Это тот случай, когда клик связывается два раза. Посмотрите на возможность, где вы это сделали. например. в js-файле, а также внутри тега script в html-документе.

Также, если контейнер динамический, вы должны использовать live вместо click. 

$("selector").live("click", function() { /*body*/ })

Вы можете попробовать это. 

$(document).ready(
function(){
    $("body").click( "#btn_toggle_transcript",
        function(){
            if(!$("#transcript_container").hasClass('opened')) {
              $("#transcript_container").slideDown(1000).addClass('opened');
            } else {
              $("#transcript_container").slideUp(1000);
            }
        }
    );
}
);
1 голос
/ 07 июля 2014

В конце моего ответа есть новое решение.

У меня была такая же проблема много раз, и определенно был только один вызов функции.
По какой-то причине каждый маленький шаг пути к переменной tween.end будет прибегать к 0. Мой обходной путь заключается в следующем: 

$('body').on('click', '.toggle', function() {
    var ul = $(this).next('ul');
    if (!$(ul).hasClass('open')) {
        $(ul).slideDown({
            step: function(now, tween) {
                if (tween.end == 0) {
                    stop();
                }
            },
            complete: function() {
                $(ul).addClass('open');
            }
        });
    } else {
        $(ul).slideUp('', '', function() {
            $(ul).removeClass('open');
        });
    }
});

Немного грязно, но это все, что я мог придумать, так как я не мог найти другой вызов функции.

1012 * редактировать *

Старый вопрос - с новым решением.
Простое добавление stop () до того, как ваш slideToggle исправит повторяющийся эффект йо-йо.

$('#element').stop().slideToggle();

0 голосов
/ 14 апреля 2016

Вы ждете окончания события, чтобы добавить класс. 

$(document).ready(
    function(){
        $("body").click( "#btn_toggle_transcript",
            function(){
                if(!$("#transcript_container").hasClass('opened')) {
                    $("#transcript_container").slideDown(1000,function(){$(this).addClass('opened')});
                } else {
                    $("#transcript_container").slideUp(1000,function(){$(this).removeClass('opened')});
                }
            }
        );
    }
);
...