Проблема с функцией переключения jquery - PullRequest
Новая
       0

Проблема с функцией переключения jquery

0 голосов
/ 23 февраля 2011

Сначала я пишу раскрывающееся верхнее меню в html: 

<div class="top-menu-contain">
    <div class="pull-button" ><a href="#">Show Me</a></div>
    <div class="pull-button"style="display: none;"><a href="#">Hide Me</a></div>
</div>

В состоянии по умолчанию, верхнее меню в верхней части браузера с «фиксированным» свойством css ， и устанавливаю «top:-100px; ", показывать только кнопку извлечения. Затем я пишу код jquery для достижения эффекта, заставляющего меню скользить вниз: 

    $('.pull-button a').toggle(function () {
        $('.top-menu-contain').animate({ top: '+=100px' }, 'slow');
    }, function () {
        $('.top-menu-contain').animate({ top: '-=100px' }, 'slow');

на самом деле это работает хорошо, затем я добавляю функцию, которая, когдаменю сдвинется вниз, кнопка может измениться с «Показать меня» на «Скрыть меня», затем я добавлю этот код jquery: $ («div.pull-button»). toggle (); Так чтообщий код jquery: 

 $('.pull-button a').toggle(function () {
        $('.top-menu-contain').animate({ top: '+=100px' }, 'slow');
        $("div.pull-button").toggle();
    }, function () {
        $('.top-menu-contain').animate({ top: '-=100px' }, 'slow');
        $("div.pull-button").toggle();
    });

Однако сейчас он не работает, кнопка может измениться, она дважды сдвинется вниз, затем сдвинется вверх дважды

вотонлайн-кейс

Так что не так с моим кодом jquery? Как я могу добиться этого правильным образом? Спасибо!

Ответы [ 2 ]

5 голосов
/ 23 февраля 2011

Проблема в том, что у вас есть два a здесь, между которыми вы переключаетесь. Что происходит, когда вы нажимаете на ссылку, это:

  • Первый щелчок: первый блок переключения выполняется для первой привязки.
  • Второй щелчок: выполняется первый блок переключения для второго якоря.
  • Третий щелчок: второй блок переключения выполняется для первого якоря.
  • Четвертый щелчок: второй блок переключения выполняется для второго якоря.

Вы можете обойти это, используя только один якорь и обновив вместо него текст: 

$('.pull-button a').toggle(function()
{
    $('.top-menu-contain').animate({ top: '+=100px' }, 'slow');
    $('div.pull-button > a').text("Hide Me");
}, function()
{
    $('.top-menu-contain').animate({ top: '-=100px' }, 'slow');
    $('div.pull-button > a').text("Show Me");
});
5 голосов
/ 23 февраля 2011

демо

jQuery 

$('.pull-button a').toggle(function() {
    $('.top-menu-contain').animate({
        top: '+=100px'
    }, 'slow');
    $(this).text('Hide Me');
}, function() {
    $('.top-menu-contain').animate({
        top: '-=100px'
    }, 'slow');
    $(this).text('Show Me');
});

html 

<div class="top-menu-contain">
    <div class="pull-button" ><a href="#">Show Me</a></div>
</div>
...