Básicamente, quiero crear una barra lateral en la que habrá muchos contactos. Cada contacto estará allí dentro de una lista. Habrá dos funciones onclick dentro de una lista. En la lista, dos funciones onclick son: 1st onclick- Después de hacer clic en la lista <li onclick=""></li> Debería abrir otra barra lateral (la he creado). 2nd onclick: este onclick está dentro de <button>, es decir, <li onclick=""><button onclick=""></button></li> Después de hacer clic en este onclick, se abrirá un nuevo chatbox (casi listo). Pero en mi caso cada vez que hago clic en cualquier lista dentro de la barra lateral, muestra tanto la barra lateral como el chatbox simultáneamente. Quiero que ambas funciones onclick funcionen por separado.

Código 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> 

La primera función onclick dentro de la lista debe apuntar debajo del código (segunda barra lateral que necesita alternar usando la función onclick):

Después de la segunda función Onclick dentro del botón, el objetivo es el siguiente código (alternar):

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

Funciones de 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>

¿Hay algún otro código para alternar 2 elementos específicos (barra lateral y chatbox)? Ambos deben hacerse dentro de una lista

  • .
  • 1
    Robin Hood 30 oct. 2017 a las 12:23

    4 respuestas

    La mejor respuesta

    Supongo que lo que necesitarías es:

    event.stopPropagation();
    

    Esto evitaría que el evento del botón (que está dentro) se propague a su padre.

    $('#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>
    0
    Agney 30 oct. 2017 a las 10:54

    El problema es entender el manejo de eventos en Javascript. Tiene un elemento de lista con un evento de clic. Este elemento de lista contiene un botón, que también tiene un evento de clic. Esto significa que, cuando hace clic en el elemento de la lista, activa 2 eventos (es por eso que ve los dos divs). Creo que puede resolver esto utilizando event.stopPropagation () en sus funciones showFrontLayer y HideFrontLayer, para evitar que el objetivo del evento se propague al elemento de la lista.

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

    Para obtener más información sobre la captura de eventos y la creación de burbujas, consulte: https://javascript.info/bubbling-and-capturing

    0
    Marouen Mhiri 30 oct. 2017 a las 09:35

    Dado que ha etiquetado esto con jQuery, voy a suponer que tiene jQuery disponible.

    Puede adjuntar eventos de clic con jQuery, $('button').click(function(){...}).

    Entonces, lo que probablemente quiera hacer es adjuntar un evento de clic que verifica el estado de ciertas características y, dependiendo de esas características, hace cosas diferentes.

    Por ejemplo, podría hacer que verifique la clase 'clic', y si no tiene la clase 'clic', expanda su segunda barra lateral y agregue la clase 'clic', y si tiene la clase 'clic'. haces la segunda función de clic que quieres que haga.

    Por supuesto, dependiendo de los detalles del comportamiento deseado, es posible que desee verificar y cambiar el estado de una manera diferente que agregar la clase 'clic', pero ese es solo un enfoque.

    0
    TKoL 30 oct. 2017 a las 09:29

    Simplemente puede usar el evento onclick usando jquery como este

    $(document).ready(function(){
        $('button').click(function(){
            <!---Your Code-->
        });
    });
    
    0
    omkara 30 oct. 2017 a las 09:33