jQuery：层次选项卡ui

我想使用jQuery创建层次选项卡ui，但我的代码结果得到的第二个层次没有显示

这是我的密码

HTML

JS

//第二层次内容显示在itemList中 $（“.itemList div#sec1 div:not（“+$”（“ul#seca.active”）.attr（“href”）+”）.hide（）

})；//结束脚本

请给我小费。 谢谢大家!

更换

<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>

文本1

文本列表1
文本列表2
文本列表3

到

文本1

文本列表1
文本列表2
文本列表3

---

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

您能解释一下您的问题吗？当你想显示第二等级时？@Pitchai谢谢你的评论。我想将第一个层次结构显示为内容类型菜单，其中有一些类别菜单，我们称之为第二层次结构。例如，用户单击的内容类型菜单称为“foo”，它有三个类别，如“bar”、“buzz”和“bazz”。首先，itemList显示“foo”的所有项目，包括所有类别。然后，该用户对类别“buzz”感兴趣，所以单击它。结果，itemList只显示“buzz”项。我看到了你的小提琴，它看起来像你期望的那样工作。你可能已经纠正了。仍然有问题吗？@Pitchai如果单击第1部分的列表1，您在itemList中看不到任何内容。请将子菜单项的内容div从主菜单的内容div移到外部。那就行了

/* 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;
}

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

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

<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>