jQueryのトグル子供UL

Question

私は、次のHTML持っている：私は（トグルする必要がある

<li class="helpClickable">What are the Terms of Service &amp; Privacy Policy?</li> 
<ul class="helpToggleAll"> 
    <li class="helpContent"><span class="helpText">The Terms of Service are the Terms you agreed to when Creating an Account on this or any of the Gone Global Dating Network Sites.</span></li> 
    <li class="helpContent"><span class="helpText">The Privacy Policy is the Policy that Governs usage of your Personal Information stored in this Website and in the Gone Global Dating Network.</span></li> 
    <li class="helpContent"><span class="helpText">Click either link to re-read the document again - <a href="includes/legal/terms-of-use.php" target="_blank">Terms of Service</a> &amp; <a href="includes/legal/privacy-policy.php" target="_blank">Privacy Policy</a>.</span></li> 
    <li class="helpContent"><span class="helpText">If you do not Agree with any part of either of these Documents then cease using this Website and the Gone Global Dating Network Imediendly.</span></li>  
</ul> 

） 'をhelpToggleAll' クラス 'helpClickable' クラスをクリックします。 私は以下のコードを成功裏にテストしてきました。

var helpClickable = $('li.helpClickable'); 
    helpClickable.click(function() { 
    $(this).children('ul').toggle(); 
    }); 

子供をトグル（）するにはどうすればよいでしょうか？

thx

Answer 1

あなたのHTMLは、jQueryの

<li class="helpClickable">What are the Terms of Service &amp; Privacy Policy? 
    <ul> 
    <li>The Terms of Service are the Terms you agreed to when Creating an Account on this or any of the Gone Global Dating Network Sites.</li> 
    <li>The Privacy Policy is the Policy that Governs usage of your Personal Information stored in this Website and in the Gone Global Dating Network.</li> 
    <li>Click either link to re-read the document again - <a href="includes/legal/terms-of-use.php" target="_blank">Terms of Service</a> &amp; <a href="includes/legal/privacy-policy.php" target="_blank">Privacy Policy</a>.</li> 
    <li>If you do not Agree with any part of either of these Documents then cease using this Website and the Gone Global Dating Network Imediendly.</li>  
    </ul> 
</li> 

次のようになります。

$('li.helpClickable').click(function() { 
    $(this).find('ul').toggle(); 
}); 

とCSS：

ul li ul { 
    display: none; 
} 

あなた<span class="helpText">とclass="helpContent"は完全に冗長化され、よuでCSSのすべてを扱うことができます：

.helpClickable ul { /* styles for the UL */ } 
.helpClickable ul li { /* styles for the text */ } 

Answer 2

これは子供ではありません。 ulを検索するか、兄弟を使用する必要があります。

var helpClickable = $('li.helpClickable'); 
helpClickable.click(function() { 
    $(this).siblings('ul.helpToggleAll').toggle(); 
}); 

または

var helpClickable = $('li.helpClickable'); 
helpClickable.click(function() { 
    $('ul.helpToggleAll').toggle(); 
}); 

Answer 3

.helpToggleAll子ではありません。それは兄弟です：

$('.helpClickable').click(function() { 
    $(this).next('.helpToggleAll').toggle(); 
}); 

Answer 4

子供はいません。これを試してみてください：

$('.helpClickable').click(function(){ 
    $('.helpToggleAll').toggle(); 
});