折开清单的垂直和水平

我有以下的列表，这是我要在以下方式行事：折开清单的垂直和水平

它应该是点击，会出现一个垂直列表中有出现。
如果您单击垂直列表中的某个项目，它必须水平显示关于该项目的信息。
我希望所有的项目都被隐藏，直到用户点击测试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

折开清单的垂直和水平

回答

相关问题