gpt4 book ai didi

javascript - 如何更改 $(this) 的 child 的 css

转载 作者:行者123 更新时间:2023-11-30 10:53:57 26 4
gpt4 key购买 nike

我有一个搜索结果页面,每个搜索结果都有一个图标,用于将每个结果添加到一个组中(在页面上的隐藏 UL 元素中列出:display:none;)。

现在它可以工作...但是当我单击一个结果列表的图标时...每个结果下方都会出现 UL。

我需要它只显示我点击图标的结果列表...不是所有列表...

目前onload代码是这样的:

$("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 &raquo;</a></li>
</ul>
</ul>
</li>

最佳答案

您需要通过移动 <ul> 来更正您的标记成为主播的 sibling ,不在<li></li>之外但在内部( <ul> 不能是 <ul> 的 child ,它是无效的 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 &raquo;</a></li>
</ul>
</li>
</ul>

然后你可以使用 .next() 像这样:

$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).addClass("current").next("ul.quicklist_menu").show();
},
function(){
$(this).removeClass("current").next("ul.quicklist_menu").hide();
});

这使用了 .show() .hide() 应用显示的快捷方式。或者,您可以使用 .click() 使用 .toggleClass() 切换和 .toggle() ,像这样:

$("a.quicklist, a[href=#newgrp]").click(function() {
$(this).toggleClass("current").next("ul.quicklist_menu").toggle();
});

关于javascript - 如何更改 $(this) 的 child 的 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3339799/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com