首先的問題我寫了一個下拉頂部菜單中的HTML：關於jQuery的切換功能

<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屬性的瀏覽器上方的頂部菜單，並設置「頂：-100px;」，只顯示button.Then我寫的jQuery代碼拉來實現，使菜單滑下一個效果：

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

actully這項工作做得很好，然後我添加一個funtion該，當菜單滑下時，按鈕可以從「顯示我」更改爲「隱藏我」，然後我添加此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(); 
    });

然而，它沒有現在的工作，該按鈕可以改變，它變得滑下兩次，然後向上滑動兩次

here is the online case

所以我的jQuery代碼出了什麼問題？我怎樣才能以正確的方式實現它？謝謝！

來源

2011-02-23 hh54188

的問題是，你有兩個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"); 
});

來源

2011-02-23 03:00:05

demo

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>

來源

2011-02-23 03:00:00 Reigel

關於jQuery的切換功能

回答

demo

相關問題