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;
});

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');
});

Answer 2

<强> Live Demo

似乎对我有用，或者我可能没有完全理解这个问题。我注意到的一件事是你错过了第一个项目的结束<dl>标签。在我补充说他们似乎都工作正常。

jQuery显示/隐藏兄弟姐妹

2 个答案: