Question

我有以下列表，我想以下列方式行事：

它应该是可点击的，然后必须出现一个垂直列表。
如果单击垂直列表中的某个项目，则必须水平显示该项目的信息。
我希望隐藏所有项目，直到用户点击Test 1-4或子菜单Test 1.1 - 1.5。

CSS＆amp; 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）

这是我的想法的图像，我希望有人能理解它并提供帮助，我确信编码很简单，我只是无法让它工作:(

Answer 1

您可以为每个测试和测试版本分配一个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）来选择一个verical nav

$("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/

折叠列表垂直和水平

1 个答案: