Материализовать выпадающий список не работает

Я пытаюсь создать выпадающее меню внутри боковой панели с помощью Materialize, но оно не работает. ширина раскрывающегося списка не совпадает с триггером, а заполнение перемещает якорь в нижнюю часть элемента списка. (Код такой же, как на сайте документации)

Вот Codepen с проблемой: пример

Спасибо за помощь :)

$(document).ready(function(){
      
      // Sidebar
      $(".button-collapse").sideNav({menuWidth: 320, activationWidth: 70, edge: 'left'});
      // Dropdown
      $('.dropdown-button').dropdown({
           inDuration: 300,
           outDuration: 225,
           constrain_width: false, // Does not change width of dropdown to that of the activator
           hover: false, // Activate on hover
           gutter: 0, // Spacing from edge
           belowOrigin: false // Displays dropdown below the button
           }
      );
    });
<div id="slide-out" class="side-nav full">
  <ul>
      <li><a href="#">First Link</span></a></li>
      <li><a href="#">Second Link</span></a></li>
      <!-- Dropdown Trigger -->
      <li><a class='dropdown-button' href='#' data-activates='dropdown1'>Drop Me!</a></li>
  </ul>
</div>

<ul id='dropdown1' 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>

<div class="row">
  <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu medium black-text left"></i></a>
</div>


javascript html drop-down-menu css materialize
person filippo90    schedule 13.05.2015    source источник
comment
Для начала вы должны исправить этот неверный HTML - удалить неоткрытые </span>s   -  person declension    schedule 14.05.2015
comment
Спасибо, диапазон был ошибкой копирования / вставки, но он все еще не работает ... Я думаю, что что-то упустил, но я не могу найти больше информации в документах, если я использую этот код вне боковой панели, он работает нормально   -  person filippo90    schedule 14.05.2015
comment
Я думаю, вы должны решить, хотите ли вы боковую панель, или раскрывающееся меню — наличие оба одновременно кажется (и выглядит) странным, и неудивительно, что CSS Materialise не кажется, поддерживает его по умолчанию.   -  person declension    schedule 14.05.2015

Ответы (7)


arrow_upward
3
arrow_downward

Вы можете установить constraint_width = true или просто инициализировать раскрывающийся список без передачи какого-либо объекта json.

$('.dropdown-button').dropdown({
           inDuration: 300,
           outDuration: 225,
           constrain_width: true, 
           hover: false, 
           gutter: 0, 
           belowOrigin: false 
           }
      );

Или вы можете инициализировать раскрывающийся список с его значениями по умолчанию (кстати, указанный выше объект json является значением раскрывающегося списка по умолчанию).

$('.dropdown-button').dropdown();
person nexuscreator    schedule 19.05.2015

arrow_upward
4
arrow_downward

Для тех, у кого есть похожая проблема: у меня аналогичная проблема, потому что я использовал бета-версию jQuery 3.x. Перешел на 2.2.2 и теперь нормально. Похоже, некоторые изменения в механизмах анимации.

Надеюсь, это поможет кому-то.

person Andrew Dunai    schedule 24.03.2016

arrow_upward
1
arrow_downward

Если вы используете bootstrap в своем проекте, привяжите materialize.js после bootstrap.js на своем сайте. Это работает для меня

person Serg    schedule 04.01.2018

arrow_upward
1
arrow_downward

Столкнувшись с той же ситуацией, я нашел решение, используя другой метод Jquery:

$(".dropdown-trigger").dropdown();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

<ul id="dropdown1" 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>
<nav>
  <div class="nav-wrapper">
   
    <ul class="left ">
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown</a></li>
    </ul>
  </div>
</nav>

источник решения

person Marlon da Veiga    schedule 07.10.2018

arrow_upward
0
arrow_downward

В моем проекте эта ошибка произошла из-за bootstrap.js. просто удалите ссылку на него, и он будет работать нормально.

person S.Mohamed Mahdi Ahmadian zadeh    schedule 10.12.2016

arrow_upward
0
arrow_downward 

<!-- Kindly be well advised there is nothing wrong with the code provided with regard to the subject.

Тем не менее, есть незначительные нарушения использования HTML-тегов («span tags») и отсутствующие теги. Кроме того, ссылки на исходные теги CDN должны быть расположены в хронологическом порядке, см. ниже. Я предполагаю, что это была копия / вставка с вашей стороны. :) Тем не менее, всегда держите свой код аккуратным, чистым, правильно сформированным и соблюдайте правила кодирования HTML «Используйте правильный тип документа». Всегда объявляйте тип документа первой строкой в ​​вашем документе: -->

<!DOCTYPE html>
<html lang="en-US">

<!--

Объявление языка важно для приложений специальных возможностей (программ чтения с экрана) и поисковых систем. Однако мы не рекомендуем опускать теги html и теги body. Отсутствие тегов html или тегов body может привести к сбою программного обеспечения DOM и XML. Отсутствие тегов body также может привести к ошибкам в старых браузерах (IE9).

В HTML5 теги заголовка можно опустить. По умолчанию браузеры будут добавлять все элементы перед тегами тела в элемент тегов заголовка по умолчанию. Вы можете уменьшить сложность HTML, опуская теги head:

набор навигационных ссылок находится перед тегами body: -->

<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://google.github.io/material-design-icons/">

<!--Import Boostrap Icon Font-->
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/1.1.34/css/materialdesignicons.min.css"> 

<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<title>Materialize Dropdown List </title>

<body>
<!-- Page Content goes here, <div> tags, <ul> tags, <li> tags and <main> tags which specify the main content of a document-->

<!-- Slide-Out Structure -->
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
    <div class="background">
        <i class="mdi mdi-office small"></i>
    </div>
        <a href="#user"><img class="circle" src="https://www.directlink.coop/img/icons/avatars/145841-avatar-set/png/boy-1.png"></a>
        <a href="#name"><span class="black-text name">HappyCoder</span></a>
        <a href="#email"><span class="black-text email">[email protected]</span></a>
</div>
</li>
    <li><a href="#!"><i class="material-icons">cloud</i>MyCloud data vault</a></li>
    <!-- Dropdown Trigger -->
    <li><a href='#' data-target='dropdown1' class='dropdown-trigger'>Drop Me!</a></li>
    <li><div class="divider"></div></li>
    <li><a class="subheader">Admin</a></li>
    <li><a class="waves-effect" href="#!">Bitcoin Expenses</a></li>
</ul>

<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider"></li>
    <li><a href="#!">If this has helped you in any way, you know what to do.</a></li>
</ul>
<!-- Slide-Out Trigger -->
<div class="row">
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="mdi mdi-menu medium black-text left"></i></a>
</div>

<!--Main layout-->
<main>
</main>

<!-- Optional JavaScript -->
<!-- Arrange the jQuery first, then Bootstrap JS, and then the materialize JS chronologically using latest versions -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

<!-- The traditional method of initializing JQuery, compatible with most browser -->
<script>
$(document).ready(function(){
    //Sidebar
  $('.sidenav').sidenav({menuWidth: 320, inDuration: 700, outDuration: 225, activationWidth: 70, edge: 'right'});
    // Dropdown
        $('.dropdown-trigger').dropdown({
           inDuration: 300,
           outDuration: 225,
           constrain_width: false, // Does not change width of dropdown to that of the activator
           hover: false, // Activate on hover
           gutter: 0, // Spacing from edge
           belowOrigin: false // Displays dropdown below the button
        });
  });
</script>
</body>
</hmtl>
        <!-- Close All HTML Elements 
        **BAD**: </span>
        **Good**: <span>/span> -->
person I'am    schedule 11.12.2018
comment
Добро пожаловать в stackoverflow Я! Здесь мы не просто даем кому-то код. Мы также объясняем это. Так что, если вы можете сделать это, это будет полезно для человека, задающего вопрос. - person Luis Estevez; 11.12.2018
comment
@Luis Estevez Готово в соответствии с запросом (запросами) внутренних правил. Я надеюсь, что это имеет смысл, кого это может касаться. - person I'am; 12.12.2018

arrow_upward
0
arrow_downward

используйте этот код, он будет работать

    document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.collapsible');
    var instances = M.Collapsible.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.collapsible').collapsible();
  });
person Akash Pise    schedule 27.02.2021