关于jquery切换功能的问题

时间:2011-02-23 02:52:13

标签: jquery toggle

首先我在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>

在默认状态下,浏览器顶部的顶层菜单带有“fixed”css属性,并设置“top:-100px;”,只显示拉按钮。然后我写了jquery代码来实现效果使菜单向下滑动:

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

这项工作很好,然后我添加一个功能,当菜单向下滑动时,按钮可以从“Show Me”更改为“Hide Me”,然后我添加这个jquery代码:      $( “div.pull按钮”)切换(); 所以总的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代码有什么问题?我怎样才能以正确的方式实现它?谢谢!

2 个答案:

答案 0 :(得分:5)

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>

答案 1 :(得分:5)

问题是你在这里有两个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");
});