2016-06-05 12 views
3

Also, ich habe diesejquery, erhalten everyhing beetwen 2 Tags

$(".carpeta").click(function(){ 
    var elementos = $(this).nextUntil('ul.segunda').html(); 
    $('.doc-doc').html(elementos); 
}); 

Mit diesem

<ul class="segunda"><span class="glyphicon glyphicon-folder-close "></span><span class="dime carpeta""></span> 
    <li class="tercera"> 
     <span class="glyphicon glyphicon-file"></span> 
     Example1 
    </li> 
    <li class="tercera"> 
     <span class="glyphicon glyphicon-file"></span> 
     Example2 
    </li> 
    <ul class="segunda"><span class="glyphicon glyphicon-folder-close "></span><span class="dime carpeta""></span> 

Auf Klick ersten ul Ich will alles bekommen bis zum nächsten ul mit der Klasse ".segunda" aber Ich habe nur die erste li "example1".

+0

Ihr Markup ist ungültig. https://www.w3.org/TR/html5/grouping-content.html#the-ul-element – undefined

Antwort

1

Ihre Problembeschreibung ist ziemlich unklar.
Entschuldigung, muss ich sagen.

ich kann nicht herausfinden, was diese Klassen sind für:

  • .dime
  • .carpeta
  • .doc-doc

Aber ich fand über .glyphicon aus.
Dies gab mir endlich einen echten Hinweis auf das, was Sie, was zu tun ist:
(Danke, übrigens, mich entdecken zu machen!)

Sie wollen Onclick die Anzeige von li s hin- und herzuschalten von einem icon..oO (Was noch?)
Und Sie werden wahrscheinlich wollen, es zu schließen, wenn es geöffnet ist.

Also hier ist ein kleines Skript, das zu tun:

$(".glyphicon-folder-open, .glyphicon-folder-close").click(function(){ 

    // Toggle display of folder icons and lis 
    $(this).parent().children("span.glyphicon, li.tercera").each(function(){ 
     var correctDisplay = "block"; 
     if($(this).hasClass("glyphicon")){ // Icon need to be inline-block 
      correctDisplay = "inline-block"; 
     } 
     if($(this).css("display") == "none"){ 
      $(this).css("display",correctDisplay); 
     }else{ 
      $(this).css("display","none"); 
     } 
    }); 
}); 

Werfen Sie einen Blick auf meine Fiddle arbeiten.

Ich habe ein anderes Glyphicon für den geöffneten Ordner hinzugefügt.
Ich habe auch eine .description Klasse ... Was vielleicht die Verwendung von .carpeta war ...

Hier ist Ihre HTML jetzt:

<ul class="segunda"> 
    <span class="glyphicon glyphicon-folder-close"></span> 
    <span class="glyphicon glyphicon-folder-open"></span> 
    <span class="description"> Numbers</span> 
    <li class="tercera"> 
     <span class="glyphicon glyphicon-file"></span> 
     Example 1 
    </li> 
    <li class="tercera"> 
     <span class="glyphicon glyphicon-file"></span> 
     Example 2 
    </li> 
    <li class="tercera"> 
     <span class="glyphicon glyphicon-file"></span> 
     Example 3 
    </li> 
    <li class="tercera"> 
     <span class="glyphicon glyphicon-file"></span> 
     Example 4 
    </li> 
</ul> 
<ul class="segunda"> 
    <span class="glyphicon glyphicon-folder-close"></span> 
    <span class="glyphicon glyphicon-folder-open"></span> 
    <span class="description"> Letters</span> 
    <li class="tercera"> 
     <span class="glyphicon glyphicon-file"></span> 
     Example A 
    </li> 
    <li class="tercera"> 
     <span class="glyphicon glyphicon-file"></span> 
     Example B 
    </li> 
    <li class="tercera"> 
     <span class="glyphicon glyphicon-file"></span> 
     Example C 
    </li> 
</ul> 
<br> 

Und einige CSS:

.tercera{ 
    display:none; 
} 
.glyphicon-folder-open{ 
    display:none; 
} 
.glyphicon{ 
    padding:6px 6px 0 0; 
} 
li{ 
    padding:0 0 0 10px; 
} 



Schlussgedanke über .doc-doc:

Weil ich das Gefühl, mich haben zu sagen es wird die nächste Frage sein ...
Wenn Sie einen Dokumenten-Gehalt in einem div irgendwo angezeigt werden soll ... Auf li Klick:
Geben Sie für Ajax.