Question

我找到了Materialize 0.98的嵌套下拉列表示例，但不适用于Materialize 1.00。我该如何移植呢？

v0.98的工作示例- https://gist.github.com/the0neyouseek/f1a92b9b8f8962a372c23ef415c63144

我尝试遵循升级指南，但无法正常工作。

 <div *ngFor="let category of mapCat">
     <div *ngFor="let sc of category.subcat;let j=index">
         <div class="col-xs-2 subcatStyle">
            <input type="checkbox" [(ngModel)]="subcatIdList[j]" value="{{sc._id}}" >  
     {{sc.name}}<hr style="margin: 4px 11px;"><p style="font-weight: 400;font-size: 12px;margin-bottom: 0px;" >{{category.parentCatName}}</p>
          </div>
        </div>
     </div>

Answer 1

请用data-activates替换data-target属性。

<a class='dropdown-button btn' href='#' data-target='dropdown1' data-beloworigin="true">Nested DropDown</a>

<ul id='dropdown1' class='dropdown-content dropdown-nested'>
    <li><a class='dropdown-button' href='#' data-target='dropdown2' data-hover="hover" data-alignment="left">one<span class="right-triangle">&#9656;</span></a></li>
    <li><a href="#!">two</a></li>
    <li><a href="#!">three</a></li>
</ul>

<ul id='dropdown2' class='dropdown-content dropdown-nested'>
    <li><a href="#!">one</a></li>
    <li><a class='dropdown-button' href="#" data-target="dropdown3" data-hover="hover" data-alignment="left">two<span class="right-triangle">&#9656;</span></a></li>
    <li><a href="#!">three</a></li>
</ul>

<ul id='dropdown3' class='dropdown-content'>
    <li><a href="#!">three</a></li>
    <li><a href="#!">four</a></li>
    <li><a href="#!">five</a></li>
    <li><a href="#!">six</a></li>
</ul>

Materialize在1.0版中更改了此属性。

看看Materialize Dropdown Doc。

Answer 2

尝试此解决方案。

.dropdown-content > li {
  position: relative;
}

.dropdown-content li .dropdown-content {
  position: absolute;
  left: 0 !important;
  top: 0 !important;
}

Answer 3

https://codepen.io/FOOGLES/pen/LYYdQeK，希望对您或其他有相同问题的人有所帮助。

嵌套下拉列表在Mat v1中不受支持，因此我们需要做一些技巧，您需要使用悬停激活嵌套的下拉列表，因此在matv1中您必须使用{ 悬停：true}在带有Jquery的下拉选择器中，之后再加上一些CSS，您可以使第二个和第三个下拉列表的位置向右，向左移动：-100％；或离开：100％；如果您希望下拉列表位于左侧，请在CSS中评论三个常用选项。

HTML：

    <a class='dropdown-trigger btn' href='#' data-target='dropdown1' >Menu</a>

    <ul id='dropdown1' class='dropdown-content dropdown-nested'>

        <li><a href="#!">uno</a></li>
        <li><a class='dropdown-trigger sub' href='#' data-target='dropdown2' >uno*</a></li>
        <li><a href="#!">uno</a></li>
    </ul>

    <ul id='dropdown2' class='dropdown-content dropdown-nested'>
        <li><a href="#!">dos</a></li>
        <li><a href="#!">dos</a></li>
        <li><a href="#!">dos</a></li>
        <li><a href="#!">dos</a></li>
        <li><a class='dropdown-trigger sub' href="#" data-target="dropdown3" >dos*</a></li>
    </ul>

    <ul id='dropdown3' class='dropdown-content'>
        <li><a href="#!">tres</a></li>
        <li><a href="#!">tres</a></li>
        <li><a href="#!">tres</a></li>
        <li><a href="#!">tres</a></li>
    </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    .dropdown-nested {
        overflow-y: visible;
    }
    .dropdown-content .dropdown-content {
       /* left: 100%;*/ /*drop hacia la izquierda*/
       left: -100%; /*drop hacia la derecha*/
       /* left: auto;*/ /*drop hacia el centro*/
    }
    .container {
        background: #eee;
        padding: 200px 100px;
        border-radius: 8px;
    }

$('.dropdown-trigger').dropdown(); $('.sub').dropdown( { hover:true }

物化CSS 1.0嵌套下拉列表

3 个答案: