Materialisieren dropdown und sidenav funktioniert nicht

Ich bin mit Materialisieren für mein design. Die Dropdownliste, und der sidenav nicht funktioniert. Die Konsole gibt keine Fehler und ich habe Initialisierung der Skripts nach jQuery-genau wie die materializecss.js.

Hier der code:

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- Initialize Materialize Scripts -->
    <script>$(".button-collapse").sideNav();</script>
    <script>$(document).ready(function(){
        $('.parallax').parallax();
    });</script>
    <script>
        $(".dropdown-button").dropdown({
            hover: false
        });
    </script>
</head>
<body>
    <ul id="dropdown1" class="dropdown-content">
      <li><a class="fakelink">Lite</a></li>
      <li><a class="fakelink">Standard</a></li>
      <li><a class="fakelink">Essential</a></li>
      <li class="divider"></li>
      <li><a class="fakelink">Enterprise</a></li>
  </ul>
    <nav role="navigation" class="red">
        <div class="nav-wrapper container">
            <a id="logo-container" class="brand-logo fakelink">MKHosting <span style="font-size:12pt;font-weight:bold;">- Easy. Fast. Secure.</span></a>
            <ul class="right hide-on-med-and-down">
                <li><a class="fakelink">Home</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
                <li><a class="fakelink">Other Services</a></li>
                <li><a class="fakelink">About</a></li>
            </ul>
            <ul id="nav-mobile" class="side-nav" style="left:-250px;">
                <li><a class="fakelink truncate">Home</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
                <li><a class="fakelink truncate">Other Services</a></li>
                <li><a class="fakelink truncate">About</a></li>
            </ul>
            <a class="button-collapse fakelink" data-activates="nav-mobile"><i class="material-icons navColorFix">menu</i></a>
        </div>
    </nav>

InformationsquelleAutor Mikkel Köhler | 2016-03-11

Haben Sie versucht, indem Sie Drehbuch an der ENDE DES BODY-ELEMENTS? Es funktioniert für mich.

HTML:

<script>$(document).ready(function(){
    $(".button-collapse").sideNav();
    $('.parallax').parallax();
    $(".dropdown-button").dropdown({
        hover: false
    });
  });
</script>

InformationsquelleAutor Diansheng

Müssen Sie sicherstellen, dass das Dokument geladen ist, bevor Sie die Seite nav und dropdown. Bewegen Sie einfach, dass code in Ihrem document.ready Funktion

HTML:

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- Initialize Materialize Scripts -->
    <script>$(document).ready(function(){
        $(".button-collapse").sideNav();
        $('.parallax').parallax();
        $(".dropdown-button").dropdown({
            hover: false
        });
    });</script>
<body>
    <ul id="dropdown1" class="dropdown-content">
      <li><a class="fakelink">Lite</a></li>
      <li><a class="fakelink">Standard</a></li>
      <li><a class="fakelink">Essential</a></li>
      <li class="divider"></li>
      <li><a class="fakelink">Enterprise</a></li>
  </ul>
    <nav role="navigation" class="red">
        <div class="nav-wrapper container">
            <a id="logo-container" class="brand-logo fakelink">MKHosting <span style="font-size:12pt;font-weight:bold;">- Easy. Fast. Secure.</span></a>
            <ul class="right hide-on-med-and-down">
                <li><a class="fakelink">Home</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
                <li><a class="fakelink">Other Services</a></li>
                <li><a class="fakelink">About</a></li>
            </ul>
            <ul id="nav-mobile" class="side-nav" style="left:-250px;">
                <li><a class="fakelink truncate">Home</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
                <li><a class="fakelink truncate">Other Services</a></li>
                <li><a class="fakelink truncate">About</a></li>
            </ul>
            <a class="button-collapse fakelink" data-activates="nav-mobile"><i class="material-icons navColorFix">menu</i></a>
        </div>
    </nav>

Ich habe jetzt versucht es. Es fixiert meine sidebar auf Handy, aber die dropdown-auf dem desktop funktioniert immer noch nicht. Überprüfen Sie selbst: kohlercoding.dk/mkhosting
Es muss etwas falsch mit Ihrer Website, weil das snippet habe ich funktioniert gut auf desktops.
Ich habe versucht zu laufen, das snippet hier. Hat nicht funktioniert entweder.
Es scheint mein browser gar nicht sehen das dropdown-Menü. Es ist nicht in der "element untersuchen"
Welchen browser benutzt du, denn es passt perfekt zu mir.
Chrome version Version 49.0.2623.75 m
Gerade aktualisiert. Kein Unterschied tho. Version 49.0.2623.87 m
Gleiche version wie ich, dann... ich weiß nicht, was falsch ist, sorry, ich konnte nicht mehr helfen.
Ich stehe vor exakt dem gleichen Fehler. mein desktop-dropdown funktioniert, bevor ich hinzufügen sidebar. Nachdem ich Hinzugefügt Seitenleiste und zu verwalten, damit es funktioniert, der desktop-dropdown nicht nicht reagieren.
Ich habe das gleiche Problem jetzt mit einer rails-app... Hast du eine Lösung?

InformationsquelleAutor Wowsk

-1

Dieser code funktionierte für mich!! Finden Sie die gesamte Erklärung hier: http://materializecss.com/side-nav.html

<ul id="slide-out" class="side-nav">
  <li><a href="#!">First Sidebar Link</a></li>
  <li><a href="#!">Second Sidebar Link</a></li>
  <li class="no-padding">
    <ul class="collapsible collapsible-accordion">
      <li>
        <a class="collapsible-header">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
        <div class="collapsible-body">
          <ul>
            <li><a href="#!">First</a></li>
            <li><a href="#!">Second</a></li>
            <li><a href="#!">Third</a></li>
            <li><a href="#!">Fourth</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </li>
</ul>
<ul class="right hide-on-med-and-down">
  <li><a href="#!">First Sidebar Link</a></li>
  <li><a href="#!">Second Sidebar Link</a></li>
  <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">First</a></li>
    <li><a href="#!">Second</a></li>
    <li><a href="#!">Third</a></li>
    <li><a href="#!">Fourth</a></li>
  </ul>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>

InformationsquelleAutor Stephannie Hilario

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.