折開清單的垂直和水平

我有以下的列表，這是我要在以下方式行事：折開清單的垂直和水平

它應該是點擊，會出現一個垂直列表中有出現。
如果您單擊垂直列表中的某個項目，它必須水平顯示關於該項目的信息。
我希望所有的項目都被隱藏，直到用戶點擊測試1-4或子菜單測試1.1-1.5。

CSS & HTML：

<style> 
    #navcontainer 
    { 
     margin-left: auto; 
     margin-right: auto; 
     margin-bottom: 40px; 
     border-top: 1px solid #999; 
     z-index: 1; 
    } 

    #navcontainer ul 
    { 
     list-style-type: none; 
     text-align: center; 
     margin-top: -8px; 
     padding: 0; 
     position: relative; 
     z-index: 2; 
    } 

    #navcontainer li 
    { 
     display: inline; 
     text-align: center; 
     margin: 0 5px; 
    } 

    #navcontainer li a 
    { 
     padding: 1px 7px; 
     color: #666; 
     background-color: #fff; 
     border: 1px solid #ccc; 
     text-decoration: none; 
    } 

    #navcontainer li a:hover 
    { 
     color: #000; 
     border: 1px solid #666; 
     border-top: 2px solid #666; 
     border-bottom: 2px solid #666; 
    } 

    #navcontainer li a#current 
    { 
     color: #000; 
     border: 1px solid #666; 
     border-top: 2px solid #666; 
     border-bottom: 2px solid #666; 
    } 
</style> 

<div id="navcontainer"> 
    <ul id="navlist"> 
     <li><a href="#" id="current">Test1</a></li> 
     <li><a href="#">Test2</a></li> 
     <li><a href="#">Test3</a></li> 
     <li><a href="#">Test4</a></li> 
    </ul> 
</div>

我試圖使其與jQuery和「TextShower」工作 - 但我根本無法（我只知道基本的HTML）

這裏是一個我的想法的形象，我希望有人可以理解它和幫助，我敢肯定，編碼是相當簡單的，我只是根本無法得到它的工作:(

來源

2014-05-20 user3656183

而你在哪裏找到「測試1.1」，「1.2測試」等，以及它們各自的文本？ – Colandus

我不知道，他們應該是一個類的描述，它需要多長時間，它需要什麼，所以簡短的文字。我在想這可能只是寫在一個div？ – user3656183

您可以爲每個測試和測試版本分配一個CSS類。

/* hide by default */ 
.vertical_nav { 
    display:none; 
} 

/* show */ 
.current { 
    display:block; 
}

現在你有更多的垂直菜單，每個人都有類verical_nav，因此它們被隱藏。

<ul class="vertical_nav" data-test="1"></ul> 
<ul class="vertical_nav" data-test="2"></ul> 
<ul class="vertical_nav" data-test="3"></ul>

此外，你必須在橫向菜單

<a href="#" class="test" data-test="1">Test 1</a> 
<a href="#" class="test" data-test="2">Test 2</a> 
<a href="#" class="test" data-test="3">Test 3</a>

此外，我們分配data-test attribte，這幫助我們確定的所有環節。

如果單擊data-test = 1的鏈接，則該想法是選擇data-test = 1。

使用jQuery的，然後（或純JS）選擇一箇中古立式導航

$("a.test").click(function() { 
    var testNumber = $(this).data("data-test"); 
    $(".vertical_nav").removeClass("current"); 
    $(".vertical_nav[data-test=" + testNumber + "]").addClass("current"); 
});

一樣，那麼你可以在中間的內容塊做。

我寫了一個小小提琴 http://jsfiddle.net/87ypG/

來源

2014-05-20 11:05:05 Luke

非常感謝，非常完美 – user3656183

折開清單的垂直和水平

回答

相關問題