jQuery:分层选项卡用户界面

Question

我想使用 jQuery 创建分层选项卡 ui，但我的代码结果得到的第二层级不显示。

my result here

这是我的代码

HTML

<div class="itemListContainer">
<ul id="itemListNav">
    <li class="current"><a class="heading active" href="#sec1">Section 1</a>
        <ul id="secMenus">
            <li><a href="#list1">List 1</a></li>
            <li><a href="#list2">List 2</a></li>
            <li><a href="#list3">List 3</a></li>
        </ul>
    </li>

    <li><a class="heading" href="#sec2">Section 2</a>
        <ul id="secMenus">
            <li>List 1</li>
            <li>List 2</li>
            <li>List 3</li>
        </ul>
    </li>

    <li><a class="heading" href="#sec3">Section 3</a>
        <ul id="secMenus">
            <li>List 1</li>
            <li>List 2</li>
            <li>List 3</li>
        </ul>
    </li>

    <li><a class="heading" href="#sec4">Section 4</a>
        <ul id="secMenus">
            <li>List 1</li>
            <li>List 2</li>
            <li>List 3</li>
        </ul>
    </li>
</ul><!-- end #itmeListNav -->

<div class="itemList">
    <div id="sec1">
        <p>text1</p>
        <div id="list1">
            text list1
        </div>
        <div id="list2">
            text list2
        </div>
        <div id="list3">
            text list3
        </div>
    </div>
    <div id="sec2">
        <p>text2</p>
    </div>
    <div id="sec3">
        <p>text3</p>
    </div>
    <div id="sec4">
        <p>text4</p>
    </div>
</div><!-- end .itemList -->
    <div class="giftsSpecificArea">

    </div><!-- end .giftsSpecificArea -->

CSS

/* General Utilities */
/* -------------------------------------------------------------------------*/
/* Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

/* itemListContainer */
.itemListContainer {
    width: 100%;
    display: inline;
}

#itemListNav {
    float: left;
    width: 25%;
    padding: .2em .1em .2em .2em;
    background: #ccc;
    border-radius: 4px 0 0 4px;
    border-right: 1px solid gray;
    margin-right: 1.69492%;
}

.itemList {
    float: left;
    width: 68.30508%;
    border-left: 1px solid gray;
    border-radius: 0;
}

JS

$(document).ready(function() {

$("ul#itemListNav li ul:not(:first)").hide(); // display only the first menus groups

/* control itemListNav */
$( "ul#itemListNav a.heading" ).click(function() {
    $(this).css('outline', 'none');
    if($(this).parent().hasClass('current')) {
        $(this).siblings('ul').slideUp('slow', function() {
            $(this).parent().removeClass('current');
        });
    } else {
        $('ul#itemListNav li.current ul').slideUp('slow', function() {
            $(this).parent().removeClass('current');
        });
        $(this).siblings('ul').slideToggle('slow', function() {
        $(this).parent().toggleClass('current');
        });
    }
    return false;
});

// 1st hierarchical contents displays at itemList  
$(".itemList div:not("+$("ul#itemListNav li a.active").attr("href")+")").hide(); // display only the first menus groups contents

    $("ul#itemListNav li a").click(function() {
        $("ul#itemListNav li a").removeClass("active");
        $(this).addClass("active");
        $(".itemList div").hide();
        $($(this).attr("href")).show();
        return false;
    });

//第2层内容显示在itemList $(".itemList div#sec1 div:not("+$("ul#secMenus li a.active").attr("href")+")").hide();

    $("ul#secMenus li a").click(function() {
        $("ul#secMenus li a").removeClass("active");
        $(this).addClass("active");
        $("#sec1 div").hide();
        $($(this).attr("href")).show();
        return false;
    });

});//结束脚本

请给我任何提示。谢谢!

Answer 1

替换

<div id="sec1">
  <p>text1</p>
  <div id="list1">text list1</div>
  <div id="list2">text list2</div>
  <div id="list3">text list3</div>
</div>

到

<div id="sec1">
  <p>text1</p>
 </div>
 <div id="list1">text list1</div>
 <div id="list2">text list2</div>
 <div id="list3">text list3</div>

因为，当您隐藏父 div 时，它不会显示内部 div。