Question

Jsfiddle Demo for working version

Jsfiddle demo for failure version

情况很复杂。我正在尝试为移动设备创建一个非画布导航侧边栏。这个想法就像Facebook移动和谷歌Plus移动。

现在进展到了Jsfiddle Demo for working version。（注意，当屏幕小于768px时，它只显示切换按钮。它是这样设计的。）

下一步，我想通过单击暗阴影区域允许用户退出侧边栏模式。为此，我bind＆amp;带有侧边栏unbind的{{1}} RightHandSide_wrapper.click个活动。

Jsfiddle demo for failure version

JavaScript的：

toggle function

这是问题所在。添加var toggle_offcanvas = function(){ if( offcanvas_toggle.prop("checked") == false ){ offcanvas_toggle.prop("checked", true); rhs_wrapper.css('cursor', 'pointer' ); rhs_wrapper.css('background-color', 'gray' ); rhs_wrapper.bind("click",toggle_offcanvas); console.log("show slidebar"); } else { offcanvas_toggle.prop('checked', false); rhs_wrapper.css('cursor', 'default' ); rhs_wrapper.css('background-color', 'inherit' ); rhs_wrapper.unbind("click",toggle_offcanvas); console.log("hide slidebar"); } } ; $(".offcanvas_button").bind("click",toggle_offcanvas);后，每次单击切换按钮时，它都会运行rhs_wrapper.bind("click",toggle_offcanvas);功能两次。这可以从控制台日志中观察到，每次点击切换按钮都会返回两个控制台输出：toggle_offcanvas和show slidebar。

当我绑定它时，看起来函数hide slidebar被召回。

请帮忙。

Answer 1

以下是解决方案：

http://jsfiddle.net/8XSJJ/

问题是你将click处理程序绑定到包含该按钮的div，这会触发处理程序两次。所以我添加了一个不同的层

<div class="graybg">
</div>

使用样式使其透明：

.graybg {
    position:fixed;
    width:100%;
    height:100%;
    opacity:0.5;
    filter:alpha(opacity=50); /* For IE8 and earlier */
    background: black;
    cursor: pointer;
    z-index: 100; /* behind slide_nav but above everything else */
    display:none; /* initially hidden */
}

基本上在代码而不是rhs_wrapper中你使用这个新图层。

绑定时调用JavaScript函数并循环

1 个答案: