Javascript 如何更改$子项的css(此)
我有一个搜索结果页面,每个页面都有一个图标,可以将每个结果添加到一个组中(在页面上的隐藏UL元素中列出:display:none;) 现在它起作用了。。。但是当我点击一个结果列表的图标时。。。UL出现在每个结果下 我需要它只显示的结果清单,我点击图标上。。。不是所有的列表 当前的加载代码如下:Javascript 如何更改$子项的css(此),javascript,jquery,css,this,children,Javascript,Jquery,Css,This,Children,我有一个搜索结果页面,每个页面都有一个图标,可以将每个结果添加到一个组中(在页面上的隐藏UL元素中列出:display:none;) 现在它起作用了。。。但是当我点击一个结果列表的图标时。。。UL出现在每个结果下 我需要它只显示的结果清单,我点击图标上。。。不是所有的列表 当前的加载代码如下: $("a.quicklist, a[href=#newgrp]").toggle( function(){ $("ul.quicklist_menu").css('display'
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$("ul.quicklist_menu").css('display','block');
$(this).addClass("current");
},
function(){
$("ul.quicklist_menu").css('display','none');
$(this).removeClass("current");
});
我尝试将其更改为:
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).children("ul.quicklist_menu").css('display','block');
$(this).addClass("current");
},
function(){
$(this).children("ul.quicklist_menu").css('display','none');
$(this).removeClass("current");
});
但是,是的。。图标高亮显示为“当前”或活动,但UL不显示
任何帮助都将不胜感激
哎呀。很抱歉以下是HTML:
<li class='vcard'>
<a href='profile.php?id=1288'><img class='user-photo' src='profile_images/sq_avatar.png' alt='Paul Dietzel' /></a>
<div class='user-info'>
<a class='fn url name' href='profile.php?id=1288'>Paul Dietzel</a>
<ul class='attributes'>
<li class='adr'><span class='locality'>Los Angeles</span>, <abbr class='region' title='California'>CA</abbr></li>
</ul>
</div>
<ul class='options'>
<li><a class='view-profile' href='profile.php?id=1288'>View profile</a></li>
<li><abbr title="Add/Remove Favorite"><button class="favorite ICON" id="1288">Remove Favorite</button></abbr></li>
<li><a class='add-to-group' href='#newgrp'>Add to group</a></li>
<ul class="quicklist_menu"><li><a href='#addgrp' id='1147' rel='1988'>Test 3</a></li>
<li><a href='#addgrp' id='1147' rel='1989'>Test 4</a></li>
<li><a href='#addgrp' id='1147' rel='1990'>Test 5</a></li>
<li><a href='#addgrp' id='1147' rel='1991'>Test 7</a></li>
<li><a href='#addgrp' id='1147' rel='1129'>Lou Herthum Acting Class</a></li>
<li><a href='#addgrp' id='1147' rel='1967'>test group</a></li>
<li class="mgrp"><a href="groups.php#newgrp">Manage Groups »</a></li>
</ul>
</ul>
</li>
洛杉矶
您需要通过将该
移动为锚的兄弟来更正标记,而不是在之外,而是在内部(
不能是
的子代,它是无效的HTML)。像这样:
<ul class='options'>
<li><a class='view-profile' href='profile.php?id=1288'>View profile</a></li>
<li><abbr title="Add/Remove Favorite"><button class="favorite ICON" id="1288">Remove Favorite</button></abbr></li>
<li><a class='add-to-group' href='#newgrp'>Add to group</a>
<ul class="quicklist_menu">
<li><a href='#addgrp' id='1147' rel='1988'>Test 3</a></li>
<li><a href='#addgrp' id='1147' rel='1989'>Test 4</a></li>
<li><a href='#addgrp' id='1147' rel='1990'>Test 5</a></li>
<li><a href='#addgrp' id='1147' rel='1991'>Test 7</a></li>
<li><a href='#addgrp' id='1147' rel='1129'>Lou Herthum Acting Class</a></li>
<li><a href='#addgrp' id='1147' rel='1967'>test group</a></li>
<li class="mgrp"><a href="groups.php#newgrp">Manage Groups »</a></li>
</ul>
</li>
</ul>
这将使用和快捷方式应用显示。或者,您可以使用和切换,如下所示:
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).addClass("current").next("ul.quicklist_menu").show();
},
function(){
$(this).removeClass("current").next("ul.quicklist_menu").hide();
});
$("a.quicklist, a[href=#newgrp]").click(function() {
$(this).toggleClass("current").next("ul.quicklist_menu").toggle();
});
您需要通过将该
移动为锚定的同级来更正标记,而不是在之外,而是在内部(
不能是
的子代,它是无效的HTML)。像这样:
<ul class='options'>
<li><a class='view-profile' href='profile.php?id=1288'>View profile</a></li>
<li><abbr title="Add/Remove Favorite"><button class="favorite ICON" id="1288">Remove Favorite</button></abbr></li>
<li><a class='add-to-group' href='#newgrp'>Add to group</a>
<ul class="quicklist_menu">
<li><a href='#addgrp' id='1147' rel='1988'>Test 3</a></li>
<li><a href='#addgrp' id='1147' rel='1989'>Test 4</a></li>
<li><a href='#addgrp' id='1147' rel='1990'>Test 5</a></li>
<li><a href='#addgrp' id='1147' rel='1991'>Test 7</a></li>
<li><a href='#addgrp' id='1147' rel='1129'>Lou Herthum Acting Class</a></li>
<li><a href='#addgrp' id='1147' rel='1967'>test group</a></li>
<li class="mgrp"><a href="groups.php#newgrp">Manage Groups »</a></li>
</ul>
</li>
</ul>
这将使用和快捷方式应用显示。或者,您可以使用和切换,如下所示:
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).addClass("current").next("ul.quicklist_menu").show();
},
function(){
$(this).removeClass("current").next("ul.quicklist_menu").hide();
});
$("a.quicklist, a[href=#newgrp]").click(function() {
$(this).toggleClass("current").next("ul.quicklist_menu").toggle();
});
使用.nextest()
和.next()
或者你也可以这样尝试
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).addClass("current")
.closest('ul.options')
.children("ul.quicklist_menu")
.css('display','block');
},
function(){
$(this).removeClass("current")
.closest('ul.options')
.children("ul.quicklist_menu")
.css('display','none');
});
使用.nextest()
和.next()
或者你也可以这样尝试
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).addClass("current")
.closest('ul.options')
.children("ul.quicklist_menu")
.css('display','block');
},
function(){
$(this).removeClass("current")
.closest('ul.options')
.children("ul.quicklist_menu")
.css('display','none');
});
请发布相关的HTML。发布您试图匹配的标记。显然,子元素
不起作用,因为在
元素中不能包含
元素,但不清楚您的层次结构实际上是什么。在询问有关DOM遍历和操作的问题时,你真的需要发布你正在谈论的HTML:)你能发布相关的HTML吗?发布你试图匹配的标记。显然,子元素
不起作用,因为在
元素中不能包含
元素,但不清楚您的层次结构实际上是什么。当询问有关DOM遍历和操作的问题时,您确实需要发布您正在谈论的HTML:)谢谢!更正了标记并使用了第一个切换,它就像一个符咒。谢谢!更正了标记并使用了第一个切换,它就像一个符咒。