Javascript 从div内部调用矛盾函数

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

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

其想法是，div“menu”将打开和关闭菜单，每隔一个位置（div“slide”与整个屏幕一样大）将关闭菜单。

---

但是什么都不起作用。

首先，缓存您的幻灯片以简化和更快地访问

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);

并创建eventhandler

切换

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代码

如果您需要对旧浏览器的支持，您的方法是可以的，但是您需要添加更多的检查。 如СаСааМааа所述，问题可能是两个可点击元素的重叠。在这种情况下，您需要停止传播

执行此操作的旧方法是返回false

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

老例子：

slide.onmouseup=function(e){/*do stuff*/ return 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')
};

或者（老路）

您也可以在不使用javascript的情况下执行此操作

有动画和延迟

或者创作复杂的手风琴

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

---

*因为看不到幻灯片，所以不需要第二个函数来隐藏它。

那么问题出在哪里？这不起作用吗？如果我理解正确，我认为你的问题是事件传播。基本上，您需要确保子div事件不会被父div触发。谢谢！我控制住了。

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
};