-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

あなたがしなければならないことは、第 2 レベルの UL を第 1 レベルの UL の外に置くことです。

lvl1 アイテムと lvl2 サブアイテムを関連付けることができるように、それらに ID を与えます。

<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

1つ目は、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 のオーバーフローを削除して、ドロップダウン メニューを表示できるようにしました。
第 1 レベルのメニューに position:relative を追加して、第 2 レベルの position:absolute を制御できるようにしました。
最後に、position:absolute を 2 番目のレベルのメニューに追加し、マージン/パディングを追加して ul ギャップを削除します。

デモ

于 2015-03-16T01:17:13.217 に答える