javascript - 查询 - 通过 href 打开列表元素并显示选定的 div

Question

此演示:http://jsfiddle.net/vv7rL8xv/1/

我想通过链接 #test 显示我的 div，例如“<a href="#test">Click</a> ”

<ul>
    <li class="active">
        <a href="#test1">Lorem ipsum</a>
        <ul>
            <li><a href="#a">Lorem ipsum child</a></li>
            <li><a href="#b">Lorem ipsum child 2</a></li>
        </ul>
    </li>

    <li>
        <a href="#test2">Test text</a>
        <ul>
            <li><a href="#c">Text child</a></li>
            <li><a href="#d">Text child 2</a></li>
        </ul>
    </li>

    <li><a href="#x">List item</a></li>
    <li><a href="#y">List item next</a></li>
</ul>

<div id="test1">This is first div</div>
<div id="test2">This is second div</div>

JQUERY:

$(function () {

    $('div').hide();
    $('ul li ul').hide();
    $('ul li:first-child ul').show();
    $('div:first').show();

    $('ul > li').click(function() {

        $(this).children('ul').slideToggle();
        $('ul > li').not(this).children('ul').slideUp();

        $('ul > li').removeClass('active');
        $(this).addClass('active');

    });

    $('ul li > a').click(function(e){

        var href = $(this).attr("href");
        $(href).slideToggle().siblings('div').hide();

    });

});

现在我的代码有错误:

• 点击列表项后，第二次点击 div 和子 ul 折叠。
• 点击子 ul 上的链接后折叠和展开
• 当来自 href 的 id 不存在时，则不隐藏事件的 div，例如“#test”

请帮助，查看演示和代码；)

Answer 1

尝试，

$(function () {
    $('div').hide();
    $('ul li ul').hide();
    $('ul li').click(function () {
        $(this).siblings('li').children('ul').hide('slow');
        var ul = $(this).children('ul');
        if (!ul.filter(':visible').length > 0) {
            ul.show('slow');
            $($(this).find('a').attr('href')).show('slow').siblings('div').hide();
        }
    })
});

DEMO