✔ Dropdown öffnet sich nicht

[Halfbax]

Guten Tag,

ich probiere mich schon seit einige Tagen mit der Dropdown Box des materializecss Frameworks.

Die DropdownBox öffnet einfach nicht.

<a class="dropdown-button" href="#!" data-activates="dropdown1">Change Language<i class="material-icons right">arrow_drop_down</i></a>

<ul id="dropdownCL" class="dropdown-content">
  <li><a href="#!">English</a></li>
  <li><a href="#!">Deutsch</a></li>
</ul>

  // NAV DD Change Language         
  $(".dropdownCL-button").dropdown();

<script src="{{ ['assets/js/materialize.min.js','assets/js/theme.js']|theme }}"></script>
      <script> {{ this.theme.custom_js }} </script>

P.S Ich verwende das OctoberCMS

MFG

 

[SpiceLab]

<a class="dropdown-button" ...>

ist nicht gleich

$(".dropdownCL-button").dropdown();

http://materializecss.com/dropdown.html

 

[SpiceLab]

... gilt auch für:

<a ... data-activates="dropdown1">

und

<ul id="dropdownCL" ...>

 

[Halfbax]

@SpiceLab Danke dir erstmal. Aber das lag wohl am Kopieren aus verschiedene Revs.

Wenn ich es aus der derzeitigen hochgeladenen Version nehme ist sie.

<a class="dropdownCL-button" ... ></a>

<!-- Nachtrag: Selbes Problem, siehe Oben.

... gilt auch für:

<a ... data-activates="dropdown1">

und

<ul id="dropdownCL" ...>

-->

Dementsprechend besteht das Problem immernoch.

 

[SpiceLab]

Hab kurz vor Deiner Antwort noch was nachgeschoben. Oder liegt hier auch blos eine falsche Kopie vor?

Wenn ja, ist die Seite für uns zugänglich? Ansonsten bitte auf http://jsfiddle.net demonstrieren.

 

[Halfbax]

Habe meinen Beitrag aktualisiert, möchte ungern ne Verwarnung wegen Spam bekommen ^^. Ja natürlich. Fehler sind aber vorprogrammiert sowie Rechtschreibfehler.
http://leon-spors.de

 

[SpiceLab]

Es hängt derzeit an .dropdownCL-button.

Den um diese beiden Zeichen erweiterten Originalnamen hast Du in materialize.js nicht berücksichtigt, wo diese Klasse zweimal auftaucht

 

[Halfbax]

Mache ich was falsch? Wenn ich nun den Name der Klase zurück auf dropdown-button ändere funktioniert es genauso wenig.

 

[SpiceLab]

Zwei Buttons (normale & mobile Version) sollen per data-activates="dropdownCL" ein und daselbe Dropdown id="dropdownCL" steuern, und letzterer (im Quellcode) macht es einwandfrei, wie es in JS mit doppelt/multiple vorhandenen ID-Bezeichnern im Markup üblich ist.

Hat es einen bestimmten Grund, den HTML-Code der Navigation für die beiden unterschiedlichen Ansichtstypen zu duplizieren?

[edit]Tipp-Ex[/edit]​

 

[Halfbax]

Zwei Buttons (normale & mobile Version) sollen per data-activities="dropdownCL" ein und daselbe Dropdown id="dropdownCL" steuern, und letzterer (im Quellcode) macht es einwandfrei, wie es in JS mit doppelt/multiple vorhandenen ID-Bezeichnern im Markup üblich ist.

Die sind doch gleich?

Derzeitiger Code:

<div class="lt-navbar navbar-fixed">
  <nav class="lt-no-background"> 
    <div class="nav-wrapper">
      <div class="lt-container container">
        <a href="{{ 'home'|page }}" class="brand-logo white-text">Leon Spors</a>
        <a href="#" data-activates="mobile-menu" class="lt-mobile-toggle button-collapse"><i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down">
          <li class="{% if this.page.id == 'home' %}active{% endif %}"><a href="{{ 'home'|page }}">Home</a></li>
          <li class="{% if this.page.id == 'contact' %}active{% endif %}"><a href="{{ 'contact'|page }}">Contact</a></li>
          <li><a class="dropdown-button" href="#!" data-activates="dropdownCL">Change Language<i class="material-icons right">arrow_drop_down</i></a></li>
        </ul>
      
        <ul class="side-nav" id="mobile-menu">
          <li class="{% if this.page.id == 'home' %}active{% endif %}"><a href="{{ 'home'|page }}">Home</a></li>
          <li class="{% if this.page.id == 'contact' %}active{% endif %}"><a href="{{ 'contact'|page }}">Contact</a></li>
          <li><a class="dropdown-button" href="#!" data-activates="dropdownCL">Change Language<i class="material-icons right">arrow_drop_down</i></a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

<ul id="dropdownCL" class="dropdown-content">
  <li><a href="#!">English</a></li>
  <li><a href="#!">Deutsch</a></li>
</ul>

 // NAV DD Change Language         
  $('.dropdown-button').dropdown();

Hat es einen bestimmten Grund, den HTML-Code der Navigation für die beiden unterschiedlichen Ansichtstypen zu duplizieren?

Das ist für die spätere Erweiterung, da ich die mobile Version eine andere Navigation plane.

Liebe Grüße
Halfbax