jQuery-隐藏元素不起作用
[英]jQuery - Hiding elements not working
问题描述
I'm new at jQuery (just picked up a book this morning!) and I'm trying to hide an element; 
我是jQuery的新手（今天早上才刚读一本书！），我正试图隐藏一个元素。 it doesn't seem to be working. 它似乎不起作用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
if ($) {
$(document).ready(
function() {
$('ul li span').click(
function() {
$(this).parent().children('ul').hide();
}
);
}
);
}
</script>
</head>
<body>
<ul>
<li><a href="">My Controls <span class="arrow">↑</span></a>
<ul>
<li><a href="">My Profile</a></li>
</ul>
</li>
</ul>
</body>
</html>
This is the full code I'm using. 这是我正在使用的完整代码。 When I click the span tag I want it to hide the inner <ul> . 单击span标签时，我希望它隐藏内部的<ul> 。 I assumed that this would access the span element, parent() the li , and children() the ul contained instead the li , but this doesn't seem to be the case. 我假设this将访问span元素， parent() li和children() ul而不是li ，但是事实并非如此。 Am I making some sort of stupid mistake here? 我在这里犯一些愚蠢的错误吗？
TIA. TIA。
4 个解决方案
解决方案1
2 2009-08-16 12:01:49
When you click on the span you get the parent of the spam (the a) and look for its ul children — it doesn't have any. 当您单击跨度时，您将获得垃圾邮件的父级（a），并查找其ul子级-它没有任何子级。
You need to go up another level. 您需要再上一层。
解决方案2
1 已采纳 2009-08-16 12:14:26
You can shorten this by navigating directly to the parent (note: parents('selector') climbs the ancestors until a match, no more .parent().parent()... guessing): 您可以通过直接导航到父项来缩短此时间（注意：parents（'selector'）会攀登祖先直到匹配为止，不再有.parent（）。parent（）...猜测）：
$(this).parents('li').find('ul').hide();
Also, I suggest this for more effect: 另外，我建议这样做以获得更多效果：
$(this).parents('li').find('ul').slideUp();
Your ul elements aren't children of your span or your anchor, they're children of the li they both belong to. 您的ul元素不是您的跨度或锚点的孩子，而是他们俩都属于li的孩子。 Traversing up to this then hiding all ul beneath is what you're after I believe. 我相信，要遍历此问题然后将所有ul隐藏在下面。
解决方案3
1 2009-08-16 12:21:57
The following works, clicking the arrow (and only by clicking the arrow, though I suspect that's intentional on your part), hides the child <ul> , in FF3.0.12, Ubuntu 8.04. 下面的作品，单击箭头（并且仅通过单击箭头，尽管我怀疑这是您的有意意图），在FF3.0.12，Ubuntu 8.04中隐藏了子<ul> 。 Though for some reason it seems unnecessarily complex. 尽管由于某种原因，它似乎不必要地复杂。
<script type="text/javascript">
if ($) {
$(document).ready(
function() {
$('ul li span').click(
function() {
$(this).parent().parent().children('ul').hide(); // Original (modified) technique
// Nick's technique: $(this).parents('li').find('ul').hide();
// My preferred technique: $(this).parents('li').find('ul').toggle();
}
);
}
);
}
</script>
解决方案4
-1 2009-08-16 12:06:15
'this' represents DOM element. “ this”代表DOM元素。 You need jQuery wrapper for it, $(this). 您需要使用jQuery包装器$（this）。 Try 尝试
$(this).parent().children('ul').hide();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.