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 ...

现在这背后的想法，点击父标签后，它的所有孩子都会出现。单击另一个父选项卡后，当前选项卡将再次隐藏，并且相应选项卡的子选项卡将为apea。现在那个wh ,,但是..
1.问题是，当我尝试设置父选项卡的样式时，它将自动应用于其所有子项。
2.问题是，儿童标签的定位。现在它们确实出现在父选项卡下面，但是它们将其他父选项卡移到侧面。我需要停止..
https://jsfiddle.net/lone_wanderer/9d4a0kLs/所以这是我的傻瓜。您可以在此处看到，蓝色选项卡是父选项卡，绿色是子选项卡。默认情况下，只有蓝色选项卡可见，单击它们后，将显示相应的子选项卡。然而，我需要它们显示在第一行下方和每个父标签的相同位置。

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”的时候，显示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/

Answer 2

第一，你的小提琴缺乏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添加到二级菜单，并使用margin / padding来删除ul间隙。

<强> DEMO

标签级别样式

2 个答案: