¿Cómo puedo hacer una <li> alternar por <ul>. Lo que está sucediendo con este código es que todos los <ul> etiquetas están siendo prestados. lo que también hace que todos los <li> etiquetas. Yo quiero uno <li> para alternar cuando su correspondiente <ul> se hace clic en.

código:

<script>

   $(document).ready(function(){
      $("ul").click(function(){
         $("li").toggle();
      });
   });

</script>


<body>
   <ul>Toggle between hide() and show()</ul>
   <li>This is a paragraph.</li>
   <ul>Toggle between hide() and show()</ul>
   <li>This is a paragraph.</li>
<body/>
  • bueno, para uno, su li necesita estar dentro de una ul.
  • su HTML no es válido. empezar por ahí.
  • Y su UL no pueden contener texto que no se encuentra dentro de un li
InformationsquelleAutor user2122032 | 2013-03-01

3 Comentarios

  1. 7

    Agregar el origen del suceso actual como contexto, también puso li en ul.

    Demostración En Vivo

    Html

    <ul>Toggle between hide() and show()
        <li>This is a paragraph.</li>
    </ul>
    <ul>Toggle between hide() and show()
        <li>This is a paragraph.</li>
    </ul>

    Javascript

    $(document).ready(function(){
          $("ul").click(function(){
               $("li", this).toggle();
          });
    });

    Edición: A activar cuando ul clic pero no li

    Demostración En Vivo

    $(document).ready(function () {
        $("ul").click(function (evt) {      
            if(evt.target.tagName != 'UL') 
                return;
            $("li", this).toggle();
        });
    });
    • Aunque. Cuando hago clic en la etiqueta li se desliza hacia atrás para arriba. Se necesita sólo deslizar hacia arriba cuando el usuario hace clic en la etiqueta de ul.
    • Comprobar mi respuesta actualizada.
  2. 1
    $("ul").click(function(){
          $(this).find("li").toggle();
    });

    y mover li‘s dentro de ul:

    <ul>
        <li>This is a paragraph.</li>
    </ul>

    En realidad, deberían totalmente refactorizar el código HTML, porque no tiene ningún sentido ( y no es válido ). Pero el código JavaScript ( lo que desencadena algo dentro de otra cosa ) es similar a la anterior.

    • Nota el código html no válido
    • Gracias, echaba de menos eso.
  3. 0

    Si usted tiene sólo una li usted no necesita un ul.
    El .toggle() función es obsoleta en jQuery 1.8.

    Intente esto:

    $(".trigger").click(function(){
       var obj = $(this).next();
       if($(obj).hasClass("hidden")){
          $(obj).removeClass("hidden").slideDown();
       } else {
          $(obj).addClass("hidden").slideUp();
       }
    });

    HTML:

    <div class="trigger">Toogle</div>
    <div class="elem hidden">Content</div>
    <div class="trigger">Toogle</div>
    <div class="elem hidden">Content</div>

    CSS:

    .elem { display:none; }

    Ver la demo aquí: DEMO

Dejar respuesta

Please enter your comment!
Please enter your name here