Question

我目前正在使用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>

Answer 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

Answer 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时，它发生得如此之快，以至于用户不知道它实际上已关闭。但是我的把戏虽然可行，但对吗？我需要一个适当的解决方案。

在下拉菜单元素内实现选择下拉菜单

2 个答案: