JQUERY撥動兒童UL

我有以下HTML：JQUERY撥動兒童UL

<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

來源

2012-02-12 Adam

如上所述，'ul.helpToggleAll'不是'li'的孩子。因此，假設'li'元素*是父'ol'或'ul'的有效子元素，這會使您的標記無效。「ul」或「ol」的***只有***有效的孩子是「li」元素。沒有其他人。將'ul.helpToggleAll'包裝在'li'中。 – 2012-02-12 00:46:38

你的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 */ }

來源

2012-02-12 00:48:08 Richard

這不是孩子。你應該搜索ul，或者使用兄弟姐妹。

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

或

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

來源

2012-02-12 00:36:34 Nix

.helpToggleAll是不是一個孩子。這是一個兄弟姐妹：

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

來源

2012-02-12 00:36:35 Blender

這不是他們的孩子。嘗試了這一點：

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

來源

2012-02-12 00:38:52

JQUERY撥動兒童UL

回答

相關問題