javascript - 如何添加到列表内的 onclick 函数,即<li onclick =""><button onclick =""></button></li>

标签 javascript jquery html css onclick

基本上,我想创建一个侧边栏,其中会有很多联系人。 每个联系人都会出现在一个列表中。 列表中有两个 onclick 函数。 列表中两个 onclick 函数是: 第一次点击-点击列表后<li onclick=""></li>它应该打开另一个侧边栏(我已经创建了它)。 第二次onclick-这个onclick在<button>里面即<li onclick=""><button onclick=""></button></li>单击此按钮后,应打开一个新的聊天框(即将完成)。 但就我而言,每当我单击侧边栏中的任何列表时,它都会同时显示侧边栏和聊天框。 我希望两个 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 函数切换的第二个侧边栏):

联系人列表 萨钦先生

萨钦先生

萨钦先生

萨钦先生

按钮内的第二个 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>

    关于javascript - 如何添加到列表内的 onclick 函数,即<li onclick =""><button onclick =""></button></li>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47011712/

    相关文章:

    javascript - 让网页看起来像一本书

    javascript - Angular 4 路由 - 异常 : Uncaught (in promise): Error: Cannot find primary outlet to load 'AppComponent'

    javascript - 现有值的自定义验证器不起作用

    css - 绝对 div 标签高度未与父 div 对齐

    php - 来自 textarea 和 mysql 的换行符不会出现在 html 中

    javascript - 正确更新 D3 饼图

    c# - 在Arcgis中使用GeoReference使用Word文件

    javascript - 为什么我的加载 gif 使我的页面加载速度变慢?

    jquery - css 完全删除而不仅仅是可见性 :hidden

    javascript - 如何通过 Ajax 调用在元素上注册鼠标悬停