jQuery hängten div Artikel verbergen

Question

Ich habe den folgenden Code, und ich versuche,/nur die inneren/beigefügten Veröffentlichungen zu verbergen, wie text1, text2 und text3:

HTML:

<div id="div1"> 
    <a href="#" id="clickItem">LINK</a> 
    <br /> 
    text1 
    <br /> 
    text2 
    <br /> 
    text3 
</div> 

jQuery :

var hide = false; 
$("#clickItem").click(function (e) { 
    if (hide == false) { 
     $("#div1").hide(); 
     hide = true; 
     return; 
    } 
     else { 
      $("#div1").show(); 
      hide = false; 
      return; 
     } 
}); 

Answer 1

Sie können den inneren Text in ein div verpacken und das innere div onclick des Links umschalten. Bitte überprüfen Sie den folgenden Abschnitt für weitere Informationen.

var hide = false; 
 
$("#clickItem").click(function (e) { 
 
    $("#innerPart").toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1"> 
 
    <a href="#" id="clickItem">LINK</a> 
 
    <div id="innerPart"> 
 
    <br /> 
 
    text1 
 
    <br /> 
 
    text2 
 
    <br /> 
 
    text3 
 
    </div>      
 
</div>

Answer 2

Es ist zu hide Textfragmenten innerhalb eines Textknoten in einem HTML-Dokument nicht möglich. jQuerys hide und show schließlich arbeiten mit dem CSS-Stil display eines HTML-Elements. Sie benötigen also ein HTML-Umbruchelement, ein span oder div für die Anwendung von show und hide von jQuery.

Answer 3

1) Sie können neue Div innerhalb Div unter dem "a" -Tag hinzufügen und Code auf inneren Teil mit ID anwenden.

2) oder verwenden Sie ".children()" und lassen Sie 1 für "a" -Tag.

Answer 4

<div id="idDiv"> 
    <a href="#" id="clickItem" onClick="toggleFunction()">LINK</a> 
    <div id="idText"> 
    <br /> text1 
    <br /> text2 
    <br /> text3 
    </div> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script> 

Wir können onclick Attribut verwenden, um die Funktionen aufzurufen.

 function toggleFunction() { 
    $("#idText").toggle(); 
    alert("ok"); 
    } 

Answer 5

Legen Sie alle Textelemente in einem span Tag und verwenden toggle Funktion der Textelemente Sichtbarkeit wechseln:

$("#clickItem").on('click', function(){ 
 
    $(".innerText", $(this).parent()).toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1"> 
 
    <a href="#" id="clickItem">LINK</a> 
 
    <br /> 
 
    <span class='innerText'>text1 
 
    <br /> 
 
    text2 
 
    <br /> 
 
    text3</span> 
 
</div>