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

回答

相關問題