Question

我希望通过链接#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。
点击链接后，子网址折叠并展开
当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

Answer 2

$(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) {

        $('ul > li').removeClass('active');
                      $(this).closest('li').addClass('active').find('ul').slideToggle();
        var href = $(this).attr("href");
        $(href).slideToggle().siblings('div').hide();
        if($(href).length === 0) {
            $('div').hide();
        }        
    });

});

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

2 个答案:

DEMO