jQuery 显示/隐藏同级元素

Question

我有一段代码，旨在隐藏除第一个以外的所有相关元素。这个目标它可以实现。接下来，根据所选项目，它应该显示/隐藏这些元素。但这部分没有正常工作。你有什么想法吗？

jQuery:

$("#accordion dl:not(:first-child)").hide();  //hide all but first
$("#menu_list a").click(function (){
 var selected = this.name; //get ID from <a> name
 $('#'+selected).show('slow').siblings().hide('slow'); //show ID by selected name, hide the rest
});

HTML:

<div id="menus">
    <ul id="menu_list">
        <li><a href="" class="menuselect" name="menu1">Menu_1</a></li>
        <li><a href="" class="menuselect" name="menu2">Menu_2</a></li>
        <li><a href="" class="menuselect" name="menu3">Menu_3</a></li>
    </ul>       
    <div id="accordion">
        <dl id="menu1">
            <dt>
                <h3>Menu 1 Item 1</h3>
            </dt>
            <dd>
                <p>Quisque scelerisque scel nisl at pellentesque. Quisque scelerisque scel nisl at pellentesque.</p>
            </dd>
        </dl>           
        <dl id="menu2">
            <dt>
                <h3>Menu 2 Item 1</h3>
            </dt>
            <dd>
                <p>Quisque scelerisque scel nisl at pellentesque. Quisque scelerisque scel nisl at pellentesque.</p>
            </dd>
        </dl>           
        <dl id="menu3">
            <dt>
                <h3>Menu 3 Item 1</h3>
            </dt>
            <dd>
                <p>Quisque scelerisque scel nisl at pellentesque. Quisque scelerisque scel nisl at pellentesque.</p>
            </dd>
        </dl>
    </div>
</div>

编辑：问题已解决 -

好的，我明白了。由于我将选择附加到链接上，所以在单击时会刷新页面。因此，从技术上讲，它是有效的，但随后又隐藏了，因为页面正在被刷新。

$("#accordion dl:not(:first-child)").hide();
$("#menu_list a").click(function ( e ) {
    var selected = this.name;
    $('#'+selected).show('slow').siblings().hide('slow');
    e.stopPropagation();
    return false;
});

- dv8withn8

---

你使用的是哪个版本的jQuery？ - jon_brockman

如果你回答了自己的问题，请考虑将其作为答案发表，然后你可以接受它。 - rossipedia

Answer 1

这应该可以工作。请注意，在您的代码中，缺少第一个</dl>

演示: http://jsfiddle.net/wVJ52/

$("#accordion dl:not(:first-child)").hide();  //hide all but first
$("#menu_list a").click(function () {
    $('#accordion dl').hide('fast');
    $('#pnl'+this.name).show('fast');
});

- Dutchie432

---

这个很好用。比我想出来的解决方案更简洁。谢谢。 - dv8withn8

Answer 2

演示现场

对我来说似乎是有效的，或者可能我没有完全理解问题。我注意到的一件事是你缺少了第一个项目的闭合<dl>标签。在我添加了它之后，它们都似乎正常工作了。

- Loktar

---

他的代码缺少第一个</dl>标签——你的代码似乎已经纠正了它。我怀疑这就是问题所在。 - Dutchie432

缺失的dl是一个笔误，因为我删除了额外的项目以简化在此处发布的内容。 - dv8withn8

好的，也忘了提到我在链接的href中添加了#。 - Loktar