使用CSS來顯示隱藏的項目

-3

我有這樣的簡單的html代碼，如jsfiddle file其中顯示<a> tag名爲Test。我要做的是當我點擊這個標籤Test時，應該顯示一個名稱爲surveySummaryMenu的新div，其中包括另外兩個<a> tag，名稱爲v1 Test和v2 Test。我這樣做通過使用CSS：使用CSS來顯示隱藏的項目

.surveySummaryList> .active >.surveySummaryMenu { 
    display: inherit; 
}

但我似乎不工作。任何人都可以有一個想法？

來源

2016-02-03 Ock

您需要在JavaScript的onclick處理。 – andi

沒有jjavascript來添加類，當你點擊鏈接 – JamieC

也沒有'積極'類的元素，所以你的CSS選擇器'.surveySummaryList> .active> .surveySummaryMenu'不起作用。你是否想添加一些爲某些元素添加'active'的js？ –

你可以做這樣的事情： JS：

<script> 
    function menuButton() { 
    document.getElementById("menu").style.display = 'block'; 
    } 
</script>

HTML：

<div class="row" > 
    <ul class=" nav surveySummaryList"> 
    <li> 
     <a href="javascript:" onclick="menuButton();"> 
     <span>Test</span> 
     </a> 
     <div class="surveySummaryMenu" id="menu"> 
     <ul class="nav navbar"> 
      <li> 
      <a href="javascript:"> 
       <i></i> v.<span>2</span> 
       <span> 
       <span>Test</span> 
       </span> 
      </a> 
      </li> 

      <li> 
      <a href="javascript:"> 
       <i></i> v.<span>1</span> 
       <span> 
       <span>Test</span> 
       </span> 
      </a> 
      </li> 
     </ul> 
     </div> 
    </li> 
    </ul> 
</div>

CSS：

.surveySummaryList .surveySummaryList { 
    margin-left: 10px; 
} 

.surveySummaryList>.active { 
    padding-left: 6px; 
    background-color: #EEEEEE; 
} 

.surveySummaryList .surveySummaryMenu a { 
    color: white; 
} 


.surveySummaryList .surveySummaryMenu a:active, 
.surveySummaryList .surveySummaryMenu a:visited { 
    background: rgba(0, 0, 0, 0.8); 
} 

.surveySummaryList>li .surveySummaryMenu { 
    background: rgba(0, 0, 0, 0.6); 
    position: absolute; 
    left: 100%; 
    top: 0; 
    display: none; 
    color: white; 
    width: 100%; 
    min-width: 200px; 
    z-index: 1001; 
} 


.surveySummaryList> .active >.surveySummaryMenu { 
    display: inherit; 
}

來源

2016-02-03 15:32:03 ketchupisred

使用CSS來顯示隱藏的項目

回答

相關問題