我真的不知道怎么把这个,但基本上我有一个调用切换功能的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”与整个屏幕一样大)将关闭菜单。 但没有任何作用。
答案 0 :(得分:0)
首先缓存幻灯片以简化和快速访问
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的情况下这样做
带有动画和延迟
或创造复杂的手风琴。
如果您有任何问题,请问。我现在写这篇文章可能会有一些错误......没有经过测试。
*因为你没有看到幻灯片,所以你不需要第二个功能来隐藏它。