关于jquery切换功能的问题

Question

首先,我在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');

实际上这项工作很好,然后我添加一个功能,当菜单向下滑动时,按钮可以从"显示我"改为"隐藏我",然后我添加这个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代码有什么问题？我怎样才能以正确的方式实现呢？谢谢!

Answer 1

演示

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>

Answer 2

问题是你在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");
});