1

我有一个搜索结果页面，每个搜索结果都有一个图标，用于将每个结果添加到一个组中（在页面上的隐藏 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>
4

2 回答 2

4

您需要通过将其移动为锚<ul>的兄弟<li></li>来更正您的标记，而不是在内部而是在内部（<ul>不能是 a 的子级<ul>，它是无效的 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();
});
于 2010-07-27T00:02:30.557 回答
0

使用.closest()和.next()

$("a.quicklist, a[href=#newgrp]").toggle(
    function(){
        $(this).closest('li').next("ul.quicklist_menu").css('display','block');   
        $(this).addClass("current");
    },
    function(){
        $(this).closest('li').next("ul.quicklist_menu").css('display','none');    
        $(this).removeClass("current");
});

或者你也可以这样尝试，

$("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');    
});
于 2010-07-27T00:02:47.770 回答