materializecss中的多个链接下拉问题答案

【问题标题】：Multiple link dropdown issue in materializecssmaterializecss中的多个链接下拉问题
【发布时间】：2019-02-05 08:21:15
【问题描述】：

我正在使用物化 css 1.0.0-rc.2。我在下拉菜单中遇到问题。相同的下拉菜单链接到导航栏和sidenav，但只有其中一个在工作，接下来它应该在悬停或单击时位于导航栏或链接下方。我应该怎么做请帮忙？

【问题讨论】：

添加一些代码和图片显示问题
向我们展示您已经做过/尝试过的事情
我修改了帖子。请看一下。谢谢
嗨@Sagar，请不要将代码作为图像发布，因为它很难重现您的问题。没有人愿意将您的图像输入代码。请参阅此处了解更多信息：meta.stackoverflow.com/a/303816/3088508
请不要将文字信息作为图片提供。

标签： materialize

【解决方案1】：

我认为它不适用于Navbar 和Sidebar 中的相同下拉结构。制作两个下拉结构可以解决您的问题。

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

【讨论】：