Question

我真的不知道怎么把这个，但基本上我有一个调用切换功能的div，它在div里面。我希望包装器div能够调用一个矛盾的函数。

<div id="slide" onclick="closeMenu()>
<div class="header">
    <div id="menu" onclick="toggleMenu()"></div>
</div>

和我的js

function toggleMenu(){
if(document.getElementById("slide").style.left == "250px") {
    document.getElementById("slide").style.left = "0px";
} else {
    document.getElementById("slide").style.left = "250px";
}
}

function closeMenu(){
    document.getElementById('slide').style.left = 0;
}

这个想法是div“菜单”将打开和关闭菜单，并且每隔一个地方（div“slide”与整个屏幕一样大）将关闭菜单。但没有任何作用。

Answer 1

首先缓存幻灯片以简化和快速访问

var slide=document.getElementById('slide');

您使用的是现代浏览器/移动浏览器吗？然后使用css

#slide{
 position:fixed;
 width:100%;height:100%;
 left:0%;
 top:-100%;
 background-color:pink;
}
#slide.active{
 top:0%;
}

然后将以下eventlisteners添加到菜单和幻灯片中。

menu.addEvnetLitener('click',toggle,false);
slide.addEvnetLitener('click',toggle,false);

并创建事件处理程序toggle

function toggle(e){
 slide.classList.toggle('active');
};

如果幻灯片处于活动状态，则将其删除，然后关闭幻灯片，单击菜单按钮将添加该类或将其删除。

classList还具有以下功能：

add,remove,contains

function add(e){
 slide.classList.add('active');
};

var isTheSlideClassActive=slide.classList.contains('active');

上面的步骤很简单，让你可以很好地控制你的dom元素。它还允许你改变幻灯片的整个css类。不用触及js代码。

如果您需要支持旧浏览器，您的方法是可以的，但您需要添加更多检查。正如Салман所提到的，问题可能是2个可点击元素的重叠。在这种情况下，你需要停止传播..

旧方法是返回false。

但我认为有些浏览器无法通过点击停止传播，因为在点击事件被触发之前发生了很多事情，例如触摸设备，所以你必须在mousedown或mouseup上使用....

示例旧：

slide.onmouseup=function(e){/*do stuff*/ return false};

新

slide.addEventListener('mouseup',function(e){e.stopPropagation()},false);

这意味着你的最终功能将是

var slide=document.getElementById('slide'),menu=document.getElementById('menu');
menu.addEvnetLitener('mouseup',toggle,false);
slide.addEvnetLitener('mouseup',toggle,false);
function toggle(e){
 e.stopPropagation();
 slide.classList.toggle('active')
};

或（旧方式）

var slide=document.getElementById('slide'),menu=document.getElementById('menu');
menu.onmouseup=toggle;
slide.onmouseup=toggle;
function toggle(e){
 var st=slide.style;
 st.left=(st.left=='250px'?0:250)+px;//short way to write what you have written.
 return false
};

你也可以在没有javascript的情况下这样做

http://jsfiddle.net/KLXMw/

带有动画和延迟

http://jsfiddle.net/RAu8Q/5/

或创造复杂的手风琴。

http://jsfiddle.net/YjCbM/1/

如果您有任何问题，请问。我现在写这篇文章可能会有一些错误......没有经过测试。

*因为你没有看到幻灯片，所以你不需要第二个功能来隐藏它。

从div内部调用Contradicting函数

1 个答案: