html – 如何在MaterialiseCSS下拉列表中创建子菜单?
发布时间:2020-12-14 21:14:34 所属栏目:资源 来源:网络整理
导读:我正在尝试使用MaterialiseCSS框架在下拉列表中有一个子菜单下拉列表.我尝试使用以下代码,但它没有用. !-- this the main dropdown --ul id="MainDropDown" class="dropdown-content" lia href="#" class="dropdown-button" data-beloworigin="true" data-co
我正在尝试使用MaterialiseCSS框架在下拉列表中有一个子菜单下拉列表.我尝试使用以下代码,但它没有用.
<!-- this the main dropdown --> <ul id="MainDropDown" class="dropdown-content"> <li><a href="#" class="dropdown-button" data-beloworigin="true" data-contrainwidth="false" data-gutter="30" data-alignment="right" data-activates="drop1">Dropdown1<span class="right caret">►</span></a></li> <li><a href="#" class="dropdown-button" data-beloworigin="true" data-contrainwidth="false" data-gutter="30" data-alignment="right" data-activates="drop2">Dropdown2<span class="right caret">►</span></a></li> <li><a href="#" class="dropdown-button" data-beloworigin="true" data-contrainwidth="false" data-gutter="30" data-alignment="right" data-activates="drop3">Dropdown3<span class="right scaret">►</span></a></li> </ul> <ul id="drop1" class="dropdown-content"> <li><a href="#">Create</a></li> </ul> <ul id="drop2" class="dropdown-content"> <li><a href="#">Create</a></li> <li><a href="#">Update</a></li> </ul> <ul id="drop3" class="dropdown-content"> <li><a href="#">Create</a></li> </ul> 解决方法
我自己也有同样的问题.
事实证明它就像嵌套另一个下拉链接一样简单, 设置一个合适的排水沟,并确保溢出 dropdown-content设置为可见. 这是一个链接到Nested dropdowns in materialize中链接的修改过的jsfiddle https://jsfiddle.net/fb0c6b5b/ $('.dropdown-button2').dropdown({ inDuration: 300,outDuration: 225,constrain_width: false,// Does not change width of dropdown to that of the activator hover: true,// Activate on hover gutter: ($('.dropdown-content').width()*3)/2.5 + 5,// Spacing from edge belowOrigin: false,// Displays dropdown below the button alignment: 'left' // Displays dropdown with edge aligned to the left of button } ); .dropdown-content{ overflow: visible !important; } <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a> <ul id='dropdown1' class='dropdown-content'> <li><a href="#!">two</a></li> <li class="divider"></li> <li><a href="#!">three</a></li> <li><a class='dropdown-button2 d' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="left">Drop Me!</a></li> </ul> <ul id='dropdown2' class='dropdown-content'> <li><a href="#!">one</a></li> <li><a href="#!">two</a></li> <li class="divider"></li> <li><a href="#!">three</a></li> </ul> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |