在 Dropdown 元素内实现 Select 下拉菜单答案

【问题标题】：Materialize Select dropdown inside a Dropdown element在 Dropdown 元素内实现 Select 下拉菜单
【发布时间】：2018-08-22 07:33:05
【问题描述】：

我目前正在使用 Materialize 1.0.0-rc.2，但遇到了问题。我知道选择框现在转换为选择下拉列表，就像下拉列表一样。正如我们所知，一个下拉菜单会关闭另一个下拉菜单。因此，如果我尝试打开放置在下拉列表中的选择框，它会关闭父下拉列表。在早期版本 (0.98) 中，情况并非如此，它工作得非常完美。谁能帮我解决一下？

<button id="dropdown-button-ex"
        class="dropdown-trigger btn-floating btn-large transparent waves-effect waves-light"
        data-target="MenuList">
        <i class="blue-grey-text material-icons">menu</i>
</button>

<ul class="dropdown-content" id="MenuList">
  <li>
    <div class="input-field">
        <select id="View1">
            <option value="" selected disabled>Select Name</option>
            <option value="Name1">Name1</option>
            <option value="Name2">Name2</option>
            <option value="Name3">Name3</option>
        </select> <label for="View1">Name</label>
     </div>
  </li>
</ul>

【问题讨论】：

标签： select dropdown materialize

【解决方案1】：

正如你所说，当你点击选择框时，下拉菜单默认关闭，选择框也会消失。这是解决此问题的解决方案：

当您打开下拉菜单时，<ul> 会出现这些样式：

.open {
   display: block; 
   width: 100px; 
   left: 0px; 
   top: 0px; 
   height: 81px; 
   transform-origin: 0px 0px 0px; 
   opacity: 1; 
   transform: scaleX(1) scaleY(1); 
}

因此，您可以使用这些 css 属性定义一个类，并在单击选择框后将其添加到下拉列表中：

$('input.select-dropdown').on("click",function(){
        $("ul#MenuList").addClass("open");
});

你也应该在选择框中选择一个项目后删除类：

$('ul.dropdown-content li span').on("click",function(){
        $("ul#MenuList").removeClass("open");
});

更清楚的是，materializecss 做了类似的事情并向 html 元素添加了一个类，但它们直接向 html 元素添加了样式。

这里是完整的解决方案：jsfiddle

【讨论】：

【解决方案2】：

不。 @bahman parsamanesh 给出的解决方案不能正常工作。单击选择框时，下拉列表消失并重新出现。我尝试了一个解决方案，但这并不完全可行。如https://materializecss.com/dropdown.html 所述，我在初始化下拉列表时所做的操作如下所示 -

var elem = document.getElementById("dropdown-button-ex");
var instances = M.Dropdown.init( elem, {
            closeOnClick: false,
            outDuration: 0,
            inDuration: 0,
            onCloseEnd: function( dropdownEl ) {
                var temp = jQuery( '#MenuList .dropdown-content' );
                for ( var i = 0; i < temp.length; i++ ) {
                    var selectDropdown = temp[i];
                    var display = selectDropdown.style.display;
                    if ( display == "block" ) {
                        var dropdownElem = M.Dropdown.getInstance( elem );
                        dropdownElem.open();
                    }
                }
            }
} );

上面的代码对我来说很好用。单击选择时，下拉列表会消失并重新出现。但由于我将 'inDuration' 和 'outDuration' 设置为 0，它发生得如此之快，以至于用户不知道它实际上已关闭。但是我的把戏，即使有效，也不对，不是吗？我需要一个合适的解决方案。

【讨论】：