开发者

jQuery show/hide siblings

I have this block of code that is intended to first hide all related elements but the first. This, it does fine. Next, it should show/hide these elements based upon which item is selected. But that part doesn’t work. Thoughts?

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>

EDIT: SOLVED -

Ok, I got it. Since I had the selection attached to a link it kept refreshing the page on click. So it was technically working but then hiding again because the page was being refreshed.

$("#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;
});


This should work. Note that in your code, you are missing the first </dl>

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


Live Demo

Seems to be working for me, or maybe I am not fully understanding the question. The one thing I noticed was your missing a closing <dl> tag for the first item. After I added that they all seemed to work fine.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜