JQuery скрыть прилагаемая элементы DIV

Question

У меня есть следующий код, и я пытаюсь скрыть/показать только внутренние/добавляемые элементы, такие как TEXT1, text2 и 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

вы можете обернуть внутренний текст в 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

Это не представляется возможным hide фрагментов текста внутри текстового узла в HTML-документе. jQuery's hide и show в конечном итоге работают с стилем CSS display элемента HTML. Таким образом, вам нужен элемент HTML для обертывания, span или div для применения jQuery's show и hide.

Answer 3

1) вы можете добавить новый div внутри div под тегом «a» и применить код на внутренней части с идентификатором.

2) или используйте «.children()» и оставьте 1-й для метки «a».

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>