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>

单击'helpClickable'类时，我需要切换（）'helpToggleAll'类。我一直在测试以下代码但没有成功。

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

切换（）孩子的最佳方式是什么？

THX

Answer 1

您的HTML应该是

<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>

jQuery：

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

和CSS：

ul li ul {
    display: none;
}

您的<span class="helpText">和class="helpContent"完全是多余的，您可以在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();
});

JQUERY Toggle Child UL

4 个答案: