jQuery：分层标签ui

我想使用jQuery创建分层标签ui，但是我的代码结果得到的第二层不显示。jQuery：分层标签ui

这是我的代码

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

$(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＃DIV秒-1：不是（ ”+ $（“ ＃UL李secMenus a.active ”）ATTR（“ HREF”） + “）”）隐藏（）;

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

}）; //结束脚本

请给我任何提示。谢谢！

来源

2013-01-10 Shinya Ota

你能解释一下你的问题吗？当你想显示第二层次？ –

@Pitchai感谢您的意见。我想将第一个层次结构显示为内容类型菜单，并且这些菜单有一些我们称为第二层次结构的类别菜单。例如，用户点击内容类型菜单被称为'foo'，其具有'bar'，'buzz'和'bazz'三个类别。首先，itemList显示包含所有类别的'foo'的所有项目。然后，此用户对类别'buzz'有兴趣，请点击它。结果，itemList只显示'buzz'的项目。 –

我看到你的小提琴，它看起来就像你期望的那样。你可能纠正了这一点。你还有问题吗？ –

更换

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

来源

2013-01-11 03:46:58

jQuery：分层标签ui

回答

相关问题