Материализовать Выберите ниспадающее меню внутри Dropdown элемента

Обновить

April 2019

Просмотры

289 раз

1

Я сейчас работаю с материализовать 1.0.0-РК-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>

2 ответы

0

Nope. The solution given by @bahman parsamanesh doesn't work fine. When clicked on select box, the dropdown disappears and reappears. I tried a solution but it is not totally feasible. What I did while initializing my dropdown, as described at https://materializecss.com/dropdown.html, is shown below -

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();
                    }
                }
            }
} );

The above code works just fine for me. The dropdown does disappear and reappears when clicked on select. But as I have set 'inDuration' and 'outDuration' as 0, it happens so fast that the user does not know that it actually closed. But my trick, even though works, isn't right, is it? I need a proper solution.

0

As you said, when you click on select box, dropdown close by default and select box disappear also. Here is a solution to solve this problem :

When you open a dropdown, a <ul> appears with these styles :

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

So you can define a class with these css properties and add it to dropdown after click on selectbox :

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

Also you should remove class after selecting an item in selectbox :

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

It was more clear that materializecss did something like this and add a class to html element but they add styles directly to html element.

Here is complete solution : jsfiddle

Связанные вопросы