如何在MaterializeCSS下拉菜单中创建子菜单?

798qvoo8  于 2023-02-14  发布在  其他
关注(0)|答案(3)|浏览(163)

我尝试有一个下拉菜单内的下拉菜单,使用物化CSS框架。我尝试了以下代码,但它没有工作。

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

bogh5gae1#

我自己也遇到过同样的问题,结果发现这很简单,只要嵌套另一个下拉链接,设置一个合适的排水沟,并确保 dropdown-content 的溢出设置为visible
下面是Nested dropdowns in materialize中修改后的jsfidle的链接
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>
2wnc66cl

2wnc66cl2#

我在这里试过,但我的是从下拉列表中对齐在同一行,然后做了它,它的工作:

.dropdown-content {
   overflow-y: visible;
}

.dropdown-content .dropdown-content {
   margin-left: 100%;
}
u2nhd7ah

u2nhd7ah3#

根据来自@LibanH的答案并针对v1.0.0版本进行了更新,您需要进行一些更改。constrain_width必须替换为constrainWidth,并且gutter不再是一个选项。
为了在合适的位置显示嵌套的下拉菜单,我们需要获取第一个下拉菜单中选定项的高度,并使用CSS设置位置

$('.dropdown-button').dropdown({
      onOpenStart: function() {
        var selectedItem = $(this).find('.selected');
        $('#dropdown2').css('top', selectedItem.outerHeight() + "px");
      }
});

$('.dropdown-button2').dropdown({
      constrainWidth: false //change
      hover: true,
      alignment: 'left'
    }
  );

加一些CSS

#dropdown2 {
  position: absolute;
  left: 100%;
}

相关问题