-1

大家好，
我正在制作一个多级标签，但我在设计这该死的东西时遇到了问题。
在这里，我有 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。您可以在此处看到，蓝色选项卡是父选项卡，绿色是子选项卡。默认情况下，只有蓝色选项卡可见，单击它们后将显示其各自的子选项卡。但是，我需要将它们显示在第一行下方以及每个父选项卡的相同位置。

4

2 回答 2

0

你要做的就是把二级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"，显示 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 链接： https ://jsfiddle.net/hscf4v8x/1/

于 2015-03-16T00:56:32.413 回答
0

第一，你的小提琴缺少 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:absolute 添加到二级菜单，并添加边距/填充以消除 ul 间隙。

演示

于 2015-03-16T01:17:13.217 回答