1

我坚持使用我的 jQuery“函数”（我只知道基础知识）。所以我正在开发一个响应式网站，当用户按下箭头图标 → [>] (a#side-toggle) 时，菜单 (#header-toggle) 滑出，图标在左侧滑动以保持可见, 文本更改为箭头 → [<]。

当我再次单击此图标时，菜单将返回到它所在的位置，并且图标为 → [>]。完美的。

在第一个功能中，显示了一个覆盖 DIV，以避免用户在使用菜单时按下内容。当您单击此覆盖时，菜单会向后滑动并且覆盖消失。普通的。但是文字没有改变，就这样卡住了→ [<]

当我再次单击文本以显示菜单时，它变为此→ [>]，并且菜单不显示（该功能实际上已恢复到其原始状态）。如果我再次单击，该功能会切换，因为它应该。

我需要解决这个问题，用户应该只在这个图标上按一次来显示菜单。

如果可能的话，清理我的代码，因为我认为它也是一团糟，哈哈

这是jsfiddle！

问题出在 JS 中，这里是摘录：

$('#side-overlay').click(function() {
    $(this).hide();
    $("#header-toggle").animate({ 
        left: "-200px",
        boxShadow: "0px 0px 0px 0px rgba(0,0,0,0)"
      }, { duration: 700, easing: "easeInOutBack", queue: false });
    $("#side-handler").animate({ 
        left: "0px",
      }, { duration: 700, easing: "easeInOutBack", queue: false });
    $("a#side-toggle").text($(this).text() == '>' ? '<' : '>');
});

谢谢你的帮助！

4

2 回答 2

1

我想我找到了问题所在。

jQuery 切换方法click在指定选择器的事件上触发。这意味着如果您手动“隐藏”或“显示”覆盖和菜单而不通过此事件，您将与切换对象的内部状态不同步。

换句话说，单击箭头，切换的内部工作将在下次单击时触发隐藏事件，但是用户单击了手动隐藏元素的叠加层。然后用户单击箭头并触发隐藏事件，即使元素已经隐藏。

这是代码：小提琴

var side = $('a#side-toggle');
var overlay = $("#side-overlay")
var header = $("#header-toggle");
var sideHandler = $("#side-handler");

side.toggle(show,hide);

overlay.click(function(){side.click()});

function show(){
    header.animate({ 
        left: "0px",
        boxShadow: "3px 1px 11px -3px rgba(0,0,0,.45)"
    }, { 
        duration: 700, 
        queue: false 
    });

    sideHandler.animate({ 
        left: "200px",
    }, { 
        duration: 700, 
        queue: false 
    });
    overlay.show();
    side.text('<'); 
}

function hide(){
    header.animate({ 
        left: "-200px",
        boxShadow: "0px 0px 0px 0px rgba(0,0,0,0)"
    }, { 
        duration: 700, 
        queue: false 
    });

    sideHandler.animate({ 
        left: "0px",
    }, { 
        duration: 700, 
        queue: false 
    });
    overlay.hide();
    side.text('>'); 
}
​
于 2012-11-04T23:28:36.650 回答
0

在你的slide-overlay .click()函数里面：

$('#side-overlay').click(function() {
    //...
    $("a#side-toggle").text($(this).text() == '>' ? '<' : '>');});​
});

$(this)实际上是指$('#side-overlay')，所以既然目标错了，箭头就不会改变。您必须将其删除$(this)并替换为正确的目标...

$("a#side-toggle").text($("a#side-toggle").text() == '>' ? '<' : '>');});​

看到它在这里工作：http: //jsfiddle.net/4HXEm/4/

于 2012-11-04T23:28:01.960 回答