demo

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');

这项工作很好，然后我添加一个功能，当菜单向下滑动时，按钮可以从“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代码有什么问题？我怎样才能以正确的方式实现它？谢谢！

Answer 1

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>

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");
});

关于jquery切换功能的问题

2 个答案:

demo