Материализация: выпадающая кнопка не выпадает - PullRequest
Новая
       6

Материализация: выпадающая кнопка не выпадает

0 голосов
/ 26 августа 2018

В следующем простом документе ни одно из раскрывающихся меню фактически не выпадает при нажатии.Первый из них скопирован с веб-сайта Materialise.Я просматриваю это с Firefox на Linux.Я переместил некоторые файлы, поэтому пути к файлам немного отличаются, но в консоли разработчика нет ошибок (кроме того, что кодировка символов не объявлена).Все, что я реализовал, начиная с сайта Materialise и до этого, правильно отображалось, и я проверил, что код JavaScript работает.

<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="../css/materialize.min.css"  media="screen,projection"/>

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

    <body>


  <ul id="dropdown2" class="dropdown-content">
    <li><a href="#!">one<span class="badge">1</span></a></li>
    <li><a href="#!">two<span class="new badge">1</span></a></li>
    <li><a href="#!">three</a></li>
  </ul>
  <a class="btn dropdown-trigger" href="#!" data-target="dropdown2">Dropdown<i class="material-icons right">arrow_drop_down</i></a>




      <div class="row">

        <div class="col s3">
          <a href="#!" class="btn dropdown-button" data-activates="dropdown2">Drop Menu <i class="material-icons right">arrow_drop_down</i></a>
          <ul id="dropdown2" class="dropdown-content">
            <li>Home</li>
            <li>Map</li>
            <li>1. Prehuman</li>
            <li>2. Ancient</li>
            <li>3. Classical</li>
          </ul>

        </div>
        <div class="col s9">
          <div class="section hoverable z-depth-2">
            <h5 class="center-align">Section header</h5>
            <p class="flow-text"> AAAAAAAAAAAAAAAA BBBBBBBBBBBBBBBBBBBBBB CCCCCCCCCCCCCCCCCCC DDDDDDDDDDDDDDDDDDD</p>



            <img src="../images/pic.png" alt="" class="responsive-img">

            <div class="video-container">
              <iframe src="../videos/vid.mp4" width="800" height="500" frameborder="0" allowfullscreen></iframe>
            </div>
          </div>
        </div>
      </div>

      <!--JavaScript at end of body for optimized loading-->
      <script type="text/javascript" src="../js/materialize.min.js"></script>
    </body>
  </html>

Я пробовал варианты этого, где я заменил data-target на data-activates и заменил dropdown-trigger на dropdown-button, но поведение такое же.Сама кнопка показывает, и когда мышь наводится на нее, она превращается в символ щелчка.Но при нажатии ничего не происходит.

1 Ответ

0 голосов
/ 26 августа 2018

Я думаю, вы просто забыли инициализировать материализацию M.AutoInit(); https://materializecss.com/auto-init.html

<!DOCTYPE html>
<html>

<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

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


</head>

<body>

    <ul id="dropdown2" class="dropdown-content">
        <li>
            <a href="#!">one
                <span class="badge">1</span>
            </a>
        </li>
        <li>
            <a href="#!">two
                <span class="new badge">1</span>
            </a>
        </li>
        <li>
            <a href="#!">three</a>
        </li>
    </ul>
    <a class="btn dropdown-trigger" href="#!" data-target="dropdown2">Dropdown
        <i class="material-icons right">arrow_drop_down</i>
    </a>




    <div class="row">

        <div class="col s3">
            <a href="#!" class="btn dropdown-button" data-activates="dropdown2">Drop Menu
                <i class="material-icons right">arrow_drop_down</i>
            </a>
            <ul id="dropdown2" class="dropdown-content">
                <li>Home</li>
                <li>Map</li>
                <li>1. Prehuman</li>
                <li>2. Ancient</li>
                <li>3. Classical</li>
            </ul>

        </div>
        <div class="col s9">
            <div class="section hoverable z-depth-2">
                <h5 class="center-align">Section header</h5>
                <p class="flow-text"> AAAAAAAAAAAAAAAA BBBBBBBBBBBBBBBBBBBBBB CCCCCCCCCCCCCCCCCCC DDDDDDDDDDDDDDDDDDD</p>



                <img src="../images/pic.png" alt="" class="responsive-img">

                <div class="video-container">
                    <iframe src="../videos/vid.mp4" width="800" height="500" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>

    <!--JavaScript at end of body for optimized loading-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
    <script>
        M.AutoInit();
    </script>
</body>
</html>
...