基本上，我想创建一个侧边栏，其中会有很多联系人。每个联系人都在列表中。列表中有两个 onclick 函数。在列表中，两个 onclick 函数是： 1st onclick- 单击列表后<li onclick=""></li>它应该打开另一个侧边栏（我已经创建了它）。第二个 onclick-这个 onclick 在里面，<button>即<li onclick=""><button onclick=""></button></li>点击这个 onclick 后，一个新的聊天框（几乎完成）应该打开。但是就我而言，每当我单击侧边栏中的任何列表时，它都会同时显示侧边栏和聊天框。我希望两个 onclick 函数都可以单独工作。
html代码：
<ul class="list mat-ripple">
<li ><img src="img1.png"><span class="name"> abc</span>
<button class="btn-link" style="margin-left:65px;color:green;font-size:15px;">
<b>
<i class="fa fa-comments" aria-hidden="true"> </i>
</b>
</button>
</li>
<li>
<img src="img1.png"><span class="name"> abc</span>
<button id="clickme" style="margin-left:65px;color:green;font-size:15px;">
<b>
<i class="fa fa-comments" aria-hidden="true"> </i>
</b>
</button>
</li>
<li onclick="toggle_div_fun('sectiontohide');">
<img src="img1.png"><span class="name"> abc</span>
<button onclick="showFrontLayer();" style="margin-left:65px;color:green;font-size:15px;">
<b>
<i class="fa fa-comments" aria-hidden="true"> </i>
</b>
</button>
</li>
</b>
</button>
</li>
<li onclick="toggle_div_fun('sectiontohide');">
<img src="img1.png"><span class="name"> abc</span>
<button onclick="showFrontLayer();" style="margin-left:65px;color:green;font-size:15px;">
<b>
<i class="fa fa-comments" aria-hidden="true"> </i>
</b>
</button>
</li>
</ul>
列表中的第一个 oclick 函数需要针对以下代码（需要使用 onclick 函数切换的第二个侧边栏）：
联系人列表 Sachin 先生 萨钦先生 萨钦先生 萨钦先生按钮内的第二个 Onclick 功能针对以下代码（切换）：
<div id="div1">
<div id="bg_mask">
<div id="frontlayer"><br/><br/><img src="https://png.icons8.com/go-back/androidL/24" title="Go Back" width="24" height="24" onclick="hideFrontLayer();" style="margin-top:-60px;position:absolute;margin-left:-20px;">
<div id='result'></div>
<div class='chatcontrols'>
<form method="post" onsubmit="return submitchat();">
<input type='text' name='chat' id='chatbox' autocomplete="off" placeholder="ENTER CHAT HERE" />
<input type='submit' name='send' id='send' class='btn btn-send' value='Send' />
<input type='button' name='clear' class='btn btn-clear' id='clear' value='X' title="Clear Chat" />
</form>
</div>
</div>
</div>
</div>
javascript函数：
<script>
function showFrontLayer() {
document.getElementById('bg_mask').style.visibility='visible';
document.getElementById('frontlayer').style.visibility='visible';
}
function hideFrontLayer() {
document.getElementById('bg_mask').style.visibility='hidden';
document.getElementById('frontlayer').style.visibility='hidden';
}
</script>
是否有其他代码可以切换 2 个目标元素（侧边栏和聊天框）？两者都应该在列表中完成
我猜你需要的是：
event.stopPropagation();
这将阻止事件从按钮（在里面）传播到它的父级。
$('#inner').click(event=>{
event.stopPropagation();
$('#other').toggle();
});
$('#outer').click(event=>{
console.log("outer");
});#outer {
background-color: blue;
width: 100px;
height: 100px;
padding-top: 50px;
}
#other {
background-color: red;
width: 100px;
height: 100px;
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<button id="inner">Toggle Visibility</button>
</div>
<div id="other">
This div has to be toggled on click of the button
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句