实体链接中的多链接下拉问题 [英] Multiple link dropdown issue in materializecss

问题描述

我正在使用物化CSS 1.0.0-rc.2.我在下拉菜单中遇到问题.相同的下拉菜单链接到导航栏和sidenav，但是只有其中一个起作用，悬停或单击时，它应该位于导航栏或链接下方.我该怎么办?

I am using materialize css 1.0.0-rc.2. I am having issues in dropdown. Same dropdown is linked to navbar and sidenav but only one of them working and next thing is it should come below the navbar or link when hovered or clicked.What should I do please help?

推荐答案

我认为对于Navbar和Sidebar中的相同下拉结构，它均不起作用.制作两个下拉菜单结构可以解决您的问题.

I think it won't work for same dropdown structure in both Navbar and Sidebar. Making two dropdown structure can solve your problem.

<nav>
    <div class="nav-wrapper">
        <a href="#!" class="brand-logo">Logo</a>
        <a href="#" data-target="mobile-demo" class="sidenav-trigger">
            <i class="material-icons">menu</i>
        </a>
        <ul 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 class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown
                    <i class="material-icons right">arrow_drop_down</i>
                </a>
            </li>
        </ul>
    </div>
</nav>

<ul id="dropdown1" class="dropdown-content">
    <li>
        <a href="#!">one</a>
    </li>
    <li>
        <a href="#!">two</a>
    </li>
    <li>
        <a href="#!">three</a>
    </li>
</ul>
<ul id="dropdown2" class="dropdown-content">
    <li>
        <a href="#!">one</a>
    </li>
    <li>
        <a href="#!">two</a>
    </li>
    <li>
        <a href="#!">three</a>
    </li>
</ul>

<ul class="sidenav" id="mobile-demo">
    <li>
        <a href="sass.html">Sass</a>
    </li>
    <li>
        <a href="badges.html">Components</a>
    </li>
    <li>
        <a class="dropdown-trigger2" href="#" data-target="dropdown2">Dropdown
            <i class="material-icons right">arrow_drop_down</i>
        </a>
    </li>
</ul>
<script>
    $(document).ready(function () {
        $(".dropdown-trigger").dropdown({
            hover: true
        });
        $(".dropdown-trigger2").dropdown();
        $('.sidenav').sidenav();
    });
</script>

这篇关于实体链接中的多链接下拉问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！