如何在MaterialiseCSS下拉菜单中创建子菜单？ [英] How can I make the submenu in the MaterializeCSS dropdown?

问题描述

我想在下拉菜单中使用MaterializeCSS框架中有一个子菜单下拉菜单。我尝试下面的代码，但它没有工作。

 <！ - 这个主要下拉列表 - > ; 
< ul id =MainDropDownclass =dropdown-content> 
< li>< a href =＃class =dropdown-buttondata-beloworigin =truedata-contrainwidth =falsedata-gutter =30data-alignment = data-activates =drop1> Dropdown1< span class =right caret>&＃9658;< / span>< / a>< / li> 
< li>< a href =＃class =dropdown-buttondata-beloworigin =truedata-contrainwidth =falsedata-gutter =30data-alignment = data-activates =drop2> Dropdown2< span class =right caret>&＃9658;< / span>< / a>< / li& 
< li>< a href =＃class =dropdown-buttondata-beloworigin =truedata-contrainwidth =falsedata-gutter =30data-alignment = data-activates =drop3> Dropdown3< span class =right scaret>&＃9658;< / span>< / a>< / li> 
< / ul> 
< ul id =drop1class =dropdown-content> 
< li>< a href =＃>创建< / a>< / li& 
< / ul> 
< ul id =drop2class =dropdown-content> 
< li>< a href =＃>创建< / a>< / li& 
< li>< a href =＃>更新< / a>< / li> 
< / ul> 
< ul id =drop3class =dropdown-content> 
< li>< a href =＃>创建< / a>< / li& 
< / ul> 
  

解决方案

原来是嵌套另一个下拉链接，
设置一个适当的gutter，并确保
dropdown-content 的溢出设置为可见。

这是指向修改后的jsfiddle链接的链接嵌套下拉菜单实现

https://jsfiddle.net/fb0c6b5b/

  $（'。dropdown-button2'）。dropdown（{inDuration：300，outDuration：225，constrain_width：false，//不改变下拉菜单的宽度为hover：true，//在hover上激活gutter： （$（'。dropdown-content'）。width（）* 3）/2.5+ 5，//从边缘下边距离ORigin：false，//显示下面的按钮对齐方式：'left'到button的左边}）;  

  .dropdown-content {overflow：visible！important;}  

 < link href =https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css =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 =＃！>两个< / a>< / li> < li class =divider>< / li> < li>< a href =＃！>三< / a>< / li> < li>< a class ='dropdown-button2 d'href ='＃'data-activates ='dropdown2'data-hover =hoverdata-alignment =left> Drop Me！< / a> ;< / li>< / ul>< ul id ='dropdown2'class ='dropdown-content'> < li>< a href =＃！>一个< / a>< / li> < li>< a href =＃！>两个< / 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>  

b

I am trying to have a submenu dropdown inside a dropdown, using MaterializeCSS framework. I tried with the following code, but it didn't work.

<!-- 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">&#9658;</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">&#9658;</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">&#9658;</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>

解决方案

I was having the same issue myself. Turns out it's as simple as nesting another dropdown link, setting an appropriate gutter, and making sure the overflow of dropdown-content is set to visible.

Here is a link to the modified jsfiddle linked in Nested dropdowns in materialize

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>

这篇关于如何在MaterialiseCSS下拉菜单中创建子菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！