在CSS中嵌套的手風琴菜單html

Question

基於this thread，我試圖構建自己的css/html手風琴菜單。當我從上面學到的東西，並將其應用到我的div，它完美的工作。我還需要添加一個與第一個菜單項組合相同的子菜單。我試圖沒有成功。有人向我解釋說，原因是我使用的是同一個目標。

（首先，我是新手，當涉及到很多這樣的事情，所以雖然有些問題，我似乎根本那是因爲我學習，我去。）根據反饋

，我試圖創建一個新版本創建2手風琴類。雖然這並沒有打破我想要的功能，但仍然存在打開兩個子菜單的問題。當你點擊PORTFOLIO時，BRANDING應該出現。當您點擊品牌時，內容應該出現。相反，當您點擊「投資組合」時，就會出現品牌和內容。

有人指出這是因爲第一個手風琴功能包括所有的子對象。雖然我已經在js中簡單介紹了這些內容，但我正在學習我不知道如何在CSS中使用它們：not（x）我遇到過，但似乎沒有解決任何問題儘管我可能做錯了。

jsfiddle

這裏是CSS以上的jsfiddle鏈接：

a { 
    color:inherit; 
    text-decoration:none; 
    font-style:normal; 
} 
/* ---------- SECTION ---------- */ 
.accordion p + div :not(.accordion2) { 
    height: 0; 
    overflow: hidden; 
    -webkit-transition: height 0.3s ease-in; 
    -moz-transition: height 0.3s ease-in; 
    -o-transition: height 0.3s ease-in; 
    -ms-transition: height 0.3s ease-in; 
    transition: height 0.3s ease-in; 
} 
.accordion :target p + div :not(.accordion2) { 
    height:auto; 
} 
.accordion .section.large:target p + div :not(.accordion2) { 
    overflow: auto; 
} 
.section p { 
    color:#FFFfff; 
    text-align:right; 
    min-width:200px; 
    background-color:#2d2d2d; 
    font-size:12px; 
    font-size-adjust:inherit; 
    padding:0px; 
    margin:0px; 
    border-top:#161616 1px solid; 
    text-decoration:none; 
    text-transform:uppercase; 
    text-decoration:none; 
    color:#ffffff; 
} 
.section p a { 
    display:block; 
    text-align:right; 
    padding-right:10px; 
    padding-left:10px; 
    padding-top:3px; 
    padding-bottom:3px; 
    min-width:180px; 
} 
.section p a:hover { 
    background-color:#c569f2; 
} 
/* ---------- SubSection ---------- */ 
.accordion2 p + div { 
    height: 0; 
    overflow: hidden; 
    -webkit-transition: height 0.3s ease-in; 
    -moz-transition: height 0.3s ease-in; 
    -o-transition: height 0.3s ease-in; 
    -ms-transition: height 0.3s ease-in; 
    transition: height 0.3s ease-in; 
} 
.accordion2 :target p + div { 
    height:auto; 
} 
.accordion2 .subsection.large:target p + div { 
    overflow: auto; 
} 
.subsection p { 
    color:#FFFfff; 
    text-align:right; 
    min-width:200px; 
    background-color:#3d3d3d; 
    font-size:12px; 
    font-size-adjust:inherit; 
    padding:0px; 
    margin:0px; 
    border-top:#161616 1px solid; 
    text-decoration:none; 
    text-transform:uppercase; 
    text-decoration:none; 
    color:#ffffff; 
} 
.subsection p a { 
    display:block; 
    text-align:right; 
    padding-right:10px; 
    padding-left:10px; 
    padding-top:3px; 
    padding-bottom:3px; 
    min-width:180px; 
} 
.subsection p a:hover { 
    background-color:#c39bda; 
} 
/* ---------- Sidebar ---------- */ 
#sidebar { 
    float: right; 
    right: 0px; 
    background-color:#161616; 
    position:fixed; 
    width:20%; 
    min-height: 100%; 
    min-width: 200px; 
    top:0px; 
} 
#side-menu { 
    right: 0px; 
    top:0px; 
    position:absolute; 
    height:75%; 
    width:100%; 
    min-width: 200px; 
    bottom:0px; 
    margin-bottom:0px; 
    min-height:600px; 
} 

下面是HTML：

<div id="sidebar"> 
    <div id="side-menu" class="accordion"> 
     <div id="menu-portfolio" class="section"> 
      <p> <a href="#menu-portfolio">Portfolio</a> 

      </p> 
      <div class="accordion2"> 
       <div id="submenu-branding" class="subsection"> 
        <p> <a href="#submenu-branding">Branding</a> 

        </p> 
        <div> 
         <p> <a href="google.com">Content</a> 

         </p> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div id="menu-about" class="section"> 
      <p> <a href="#menu-about">About</a> 

      </p> 
      <div> 
       <p><a href="google.com">Resume</a> 
       </p> 
      </div> 
     </div> 
     <div id="menu-contact" class="section"> 
      <p> <a href="#menu-contact">Contact</a> 

      </p> 
      <div> 
       <p><a href="google.com">Content</a> 
       </p> 
       <p><a href="google.com">Content2</a> 
       </p> 
       <p><a href="google.com">Content3</a> 
       </p> 
      </div> 
     </div> 
    </div> 
</div> 

誰能幫助我理解我在做什麼錯？

Answer 1

如果您使用div或列表（儘管大多數教程將使用列表），這並不重要。它主要參考正確的項目。簡要地看一下代碼，你沒有指定不顯示子子菜單。

我添加了一個新的類，你的第一個內容，哪些目標確實在CSS - 只顯示後的股利權：

HTML：

<div class="subsub"> <!--added a new class. I have never used :not, but it seems that it does't allow nesting inside :not selectors --> 
    <p><a href="google.com">Content</a></p> 
</div> 

CSS：

.accordion :target p + div :not(.subsub) { 
    height:auto; 
} 

您必須重申您點擊品牌時在點擊子菜單上顯示子菜單時所做的操作。

快速提琴：http://jsfiddle.net/jennift/m4ADf/2/

Answer 2

我還沒有看過你的代碼，但正如你所說的「它包含了所有的子對象」。您可以通過使用直接後代選擇器「>」來防止這種情況。它只會獲得直接的子元素，例如

ul > li { 

} 

只會設計裏面的元素，裏面沒有其他元素。