materialize - materializecss中的多个链接下拉问题
问题描述
我正在使用物化 css 1.0.0-rc.2。我在下拉菜单中遇到问题。相同的下拉菜单链接到导航栏和sidenav,但只有其中一个工作,接下来是当悬停或单击时它应该位于导航栏或链接下方。我应该怎么做请帮忙?
解决方案
我认为它不适用于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>
推荐阅读
- swift - 如何简单地将关卡数据存储为数组并再次加载?
- reactjs - Redux withRouter 在超类的静态方法中
- java - 我没有在 BuildConfig 中获得 FLAVOR 字符串,它在 Android Studio 的 BuildConfig 中丢失
- vue.js - 如何配置 Gridsome 以使用 API 将数据插入静态站点模板生成数千个产品页面?
- javascript - 如何将密码安全地存储在本地存储中
- sql-server - 提交大小远高于工作集
- javascript - ngIf - 使用服务器端条件
- c# - 列表添加到视图模型
- python - 是否可以在 Python 中声明一个名为“except”的函数?
- javascript - Discord.js 成员数减少了问题