Question

基本上，我想创建一个侧边栏，其中会有很多联系人。每个联系人都在列表中。列表中将有两个onclick函数。在列表中，两个onclick函数是：第1次onclick-单击列表<li onclick=""></li>后应该打开另一个侧边栏（我创建了它）。第2次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 Sir

Sachin Sir

按钮内的第二个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个目标元素（侧边栏和聊天框）？两者都应该在列表中完成

。

Answer 1

鉴于您已使用jQuery对此进行了标记，我将假设您已提供jQuery。

您可以使用jQuery $('button').click(function(){...})附加点击事件。

因此，您可能想要做的是附加一个点击事件，检查某些功能的状态，并根据这些功能执行不同的操作。

例如，您可以让它检查班级是否已点击＆＃39;，如果它没有点击该课程，请展开您的第二个侧边栏并添加class＆＃39;点击＆＃39;，如果确实有这个类＆＃39;点击＆＃39;你做你希望它做的第二次点击功能。

当然，根据所需行为的具体情况，您可能希望以与添加“点击”类别不同的方式检查和更改状态，但这只是一种方法。< / p>

Answer 2

你可以像这样使用jquery来简单地使用onclick事件

$(document).ready(function(){
    $('button').click(function(){
        <!---Your Code-->
    });
});

Answer 3

问题在于理解Javascript中的事件处理。您有一个带有click事件的list元素。此列表元素包含一个按钮，该按钮也有一个单击事件。这意味着，当您单击列表项时，您将触发2个事件（这就是您看到两个div的原因）。我认为您可以通过在showFrontLayer和HideFrontLayer函数中使用event.stopPropagation（）来解决此问题，以防止事件目标冒泡到列表项。

function showFrontLayer(evt) {
   evt.stopPropagation();
   document.getElementById('bg_mask').style.visibility='visible';
   document.getElementById('frontlayer').style.visibility='visible';
}
function hideFrontLayer(evt) {
  evt.stopPropagation();
  document.getElementById('bg_mask').style.visibility='hidden';
  document.getElementById('frontlayer').style.visibility='hidden';
}

有关事件捕获和冒泡的更多信息，请参阅：https://javascript.info/bubbling-and-capturing

Answer 4

我猜你需要的是：

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>

如何在列表中添加onclick函数，例如<li onclick =“”> <button onclick =“”> </button> </li>

4 个答案: