jQueryの追加のdiv項目

Question

私は、次のコードを持っていると私は、このようなテキスト1、テキスト2とテキスト3のみとインナー/追加アイテム、/ショーを非表示にしようとしています隠す：

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

divの内側のテキストを折り返してリンクの内側div onclickを切り替えることができます。詳細は以下のスニペットをご覧ください。

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

これは、HTML文書内のテキストノードの内部hideテキスト断片することはできません。 jQueryのhideとshowは最終的にHTML要素のCSSスタイルdisplayで動作します。したがって、jQueryのshowとhideを適用するには、ラッピングHTML要素spanまたはdivが必要です。

Answer 3

1） "a"タグの下のdiv内に新しいdivを追加し、内側の部分にidを付けてコードを適用することができます。

2）または ".children（）"を使用し、 "a"タグで1番目のままにします。

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> 

onclick属性を使用して関数を呼び出すことができます。

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

Answer 5

spanタグにすべてのテキスト項目を入れて、テキスト項目の可視性を切り替えることtoggle機能を使用します。

$("#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>