选项卡级别样式

Question

大家好
我正在制作一个多级选项卡，但我运行遇到了该死的样式问题。
在这里，我有 2 个级别的无序列表

<section class="tabs">
    <ul class="links1lvl">
        <li><a>About</a>
            <ul class="links2lvl">
                <li><a href="#about/who">O nás</a></li>
                <li><a href="#about/personal">Personál</a></li>
        </li>
        <li><a>student</a>
            <ul class="links2lvl">
                <li><a href="student/chart.html">Rozvrhy</a></li>
                <li><a href="student/charts.html">Bloková výuka</a></li>

...等... 我有我的 jQuery

$(function () {
    $(".links2lvl a").click(function(){
        $(".links2lvl li").siblings("li").removeClass("active2");
        $(this).parent("li").addClass("active2");
    });
});
$(function(){
    $(".links2lvl").hide();
    $(".links1lvl li").click(function(){
       $(this).children(".links2lvl").toggle();

    });
});

当然还有CSS

.links1lvl a 
    {
    padding: 5px 10px;
    display: inline-block;
    border-radius: 3px 3px 0px 0px;
    background: blue;
    font-size: 13px;
    color: red;
    transition: all linear 0.15s;
    }
.links2lvl a
    {
    padding: 5px 10px;
    display: inline-block;
    border-radius: 3px 3px 0px 0px;
    background: greenyellow;
    font-size:10px;
    color:orangered;
    transition: all linear 0.15s;
.links2lvl li
    {
    margin: 4px 5px auto 0px;
    float:left;
    list-style: none;
.active2 a
    {
    background: white;
    color:black;
    }
... and much more ...

现在这背后的想法是点击父标签后，它的所有子标签都会出现。单击另一个父选项卡后，当前选项卡将再次隐藏，相应选项卡的子选项卡将消失。现在这很糟糕，但是..
1. 问题是，当我尝试设置父选项卡的样式时，它会自动应用于其所有子选项卡。
2. 问题是，子选项卡的定位。现在它们确实出现在父选项卡下方，但它们将其他父选项卡移到了一边。我需要停止..
https://jsfiddle.net/lone_wanderer/9d4a0kLs/ 这是我的 jsfiddle。您可以在这里看到，蓝色选项卡是父选项卡，绿色是子选项卡。默认情况下，只有蓝色选项卡可见，单击它们后将显示它们各自的子选项卡。但是，我需要将它们显示在第一行下方以及每个父选项卡的同一位置。

Answer 1

您需要做的是将第二级 ul 放在第一级 ul 的外面。

给他们 id，这样你就可以关联 lvl1 项目和 lvl2 子项目。

<section class="tabs">
    <ul class="links1lvl">
        <li id="about"><a>About</a></li>
        <li id="student"><a>student</a></li>
    </ul>

    <ul class="links2lvl" id="about-submenu">
        <li><a href="#about/who">O nás</a></li>
        <li><a href="#about/personal">Personál</a></li>
        <li><a href="#about/study">Studijní</a></li>
        <li><a href="#about/iCenter">Informacní c.</a></li>
        <li><a href="#about/helpdesk">Aktuality</a></li>
        <li><a href="#about/practise">Praxe</a></li>
    </ul>
    <ul class="links2lvl" id="student-submenu">
        <li><a href="student/chart.html">Rozvrhy</a></li>
        <li><a href="student/charts.html">Bloková výuka</a></li>
        <li><a href="student/r.changes.html">Zmeny místností</a></li>
        <li><a href="student/teach_info.html">Informace</a></li>
        <li><a href="student/study_info.html">informace 2</a></li>
        <li><a href="student/exams.html">Zkoušky</a></li>
        <li><a href="student/final_exams.html">záverecné zkoušky</a></li>
        <li><a href="student/download.hml">Ke stažení</a></li>
    </ul>

</section>

使用JQuery然后你会知道当lvl1 id="about"被点击时，show lvl2 id="about-submenu".

$(function(){
    $(".links2lvl").hide();
    $(".links1lvl li").click(function(){   
        $(".links2lvl").hide();
        var selectedID = ($(this).attr('id'));
        $('#'+selectedID + '-submenu').toggle();
    });
});

我还为 lvl2 链接添加了样式，以便它们显示在 lvl1 链接下方

.links2lvl {
    clear:both;
}

JSFiddle Link: https://jsfiddle.net/hscf4v8x/1/

Answer 2

1、你的fiddle不足jquery。
也许这就是为什么他们在您的开发站点中显示全部而不是隐藏的原因。

2、下拉菜单效果

你会改变你的一些css

.tabs       
{
width: 1320px;
display:inline-block; 
background:pink;
/*overflow: auto;*/
margin:auto auto 0 15px;
}

.links1lvl li
{
margin: 0px 5px;
float:left;
list-style: none;
position:relative;
}

.links2lvl{
position: absolute;
top: 100%;
margin:0;
padding:0;
}

删除了 .tabs 的溢出以显示下拉菜单。
为一级菜单添加position:relative，以便二级position:absolute受控。
最后，将 position:absolute 添加到二级菜单，并添加 margin/padding 以消除 ul 差距。

DEMO

选项卡级别样式

Tabs level styling

jquery

css

list

tabs

unordered