Question

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

当我再次点击此图标时，菜单会返回到它所来的位置，图标为→[＆gt;]。完美。

在第一个功能中，显示叠加DIV，以避免用户在使用菜单时按下内容。单击此叠加层时，菜单会向后滑动，叠加层会消失。正常。但是文本没有改变，它就像那样→[＆lt;]

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

我需要解决此问题，用户只需在此图标上按一下即可显示菜单。

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

这是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() == '>' ? '<' : '>');
});

感谢您的帮助！

Answer 1

我想我已经找到了这个问题。

在指定选择器的click事件上触发jQuery切换方法。这意味着如果你手动＆＃34;隐藏＆＃34;或＆＃34;显示＆＃34;覆盖和菜单没有经过这个事件你将与切换对象的内部状态不同步。

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

以下是代码：Fiddle

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

Answer 2

在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() == '>' ? '<' : '>');});

See it working here: http://jsfiddle.net/4HXEm/4/

单击外部时可以使用切换功能

2 个答案: