物化 - 选项卡内的下拉列表

时间:2017-10-17 16:52:07

标签: html frontend materialize

我需要像this这样的标签中的this下拉列表,我希望使用Materialize将下拉列表作为标签。我怎么能这样做?

2 个答案:

答案 0 :(得分:0)

导航扩展下拉内容您想要的是一个未解决的问题,有关详情,您可以看到以下链接 - github issues #3920

答案 1 :(得分:0)

<强> HTML:

  <nav class="nav-extended">
    <div class="nav-wrapper">
        <div class="top-nav">
            <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
            <ul id="nav-mobile" class="right hide-on-med-and-down">
               <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a href="collapsible.html">JavaScript</a></li>
            </ul>
        </div>
        <ul class="side-nav" id="mobile-demo">
            <li><a href="sass.html">Sass</a></li>
            <li><a href="badges.html">Components</a></li>
            <li><a href="collapsible.html">JavaScript</a></li>
        </ul>
        <ul class="drop-tab">
        <li>
            <!--<a href="#test3">Disabled Tab</a>-->
        </li>
      </ul>
        <ul materialize="tabs" class="tabs tabs-transparent">

            <li class="tab space-tab"><a class="active" href="#test2">Test 2</a></li>
            <li class="tab"><a href="#test3">Disabled Tab</a></li>
            <li class="tab"><a href="#test4">Test 4</a></li>
            <li class="tab"><a href="#test5">Test 2</a></li>
            <li class="tab"><a href="#test6">Disabled Tab</a></li>
            <li class="tab"><a materialize="dropdown" href="#" class="dropdown-button"  data-activates="dropdown1">Dropdown</a></li>
        </ul>
    </div>
</nav>
<div>something</div>
<ul id="dropdown1" class="dropdown-content black white-text">
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li class="divider"></li>
    <li><a href="#">three</a></li>
</ul>    

<强> CSS:

.tabs {
     overflow-x: visible !important;
     overflow-y: initial !important;
}

<强> JS

$(document).ready(function() {
    $('.dropdown-button').dropdown();
});