CODEWITHSUNDEEP
jquerydropdownmaterialize
dima
dima

Reputation: 158

Has someone a workaround to activate 2 or multiple dropdowns with Materialize Framework?

I'm trying to have to mutiple dropdowns elements in Materialize. I found out that it doesn't work, but there is a workaround stated here by singhshash:

https://github.com/Dogfalo/materialize/issues/2621

my problem is I can't activate dropdown accessing id='btndropdown1', but it is the only ID with this specific name. Has anyone a workaround other that the solution stated above? 

<a id='btndropdown1' class='dropdown-trigger' href="#" data-target='dropdown1'>
  <div class="col s2 m3">
    <div class="card red darken-1">
      <div class="card-content white-text">
        <span class="card-title center">Heizen</span>
      </div>
      <div class="center">
        <i class="material-icons large white-text">hot_tub</i>
      </div>

      <ul id='dropdown1' class='dropdown-content red darken-1'>
        <li ><a href="#!" class="black-text">Heizgeräte</a></li>
        <li class="divider" tabindex="-1"></li>
        <li><a href="#!" class="black-text">Ex-Heizgeräte</a></li>
        <li class="divider" tabindex="-1"></li>
        <li><a href="#!" class="black-text">Heizgebläse</a></li>
      </ul>
    </div>
  </div>
</a>
<a  id='btndropdown2' class='dropdown-trigger' href="#" data-target='dropdown2'>
  <div class="col s2 m2">
    <div class="card cyan darken-1">
      <div class="card-content white-text">
        <span class="card-title center">Filterlüfter</span>
      </div>
      <div class="center">
        <i class="material-icons large white-text">view_headline</i>
      </div>
      <ul id='dropdown2' class='dropdown-content cyan'>
        <li ><a href="#!" class="black-text">Filterlüfter</a></li>
        <li class="divider" tabindex="-1"></li>
        <li><a href="#!" class="black-text">Outdoor-Filterlüfter</a></li>
        <li class="divider" tabindex="-1"></li>
        <li><a href="#!" class="black-text">Dach-Filterlüfter</a></li>
        <li class="divider" tabindex="-1"></li>
        <li><a href="#!" class="black-text">Lüftereinschub</a></li>
        <li class="divider" tabindex="-1"></li>
        <li><a href="#!" class="black-text">Einbaulüfter</a></li>
      </ul>
    </div>
  </div>
</a>

<script type='text/javascript'>
  $(document).ready(function(){
    $('#btndropdown1').dropdown();
    $('#btndropdown2').dropdown();
  });
</script>

Upvotes: 2

Views: 49

Answers (1)

Bahman Parsa Manesh
Bahman Parsa Manesh

Reputation: 2370

Your dropdown not work because you added dropdown (<ul> tag) inside <a> tag.

If you move it outside of <a>, problem will solve.

<a id='btndropdown1' class='dropdown-trigger' href="#" data-target='dropdown1'>
  <div class="col s2 m3">
    <div class="card red darken-1">
      <div class="card-content white-text">
        <span class="card-title center">Heizen</span>
      </div>
      <div class="center">
        <i class="material-icons large white-text">hot_tub</i>
      </div>
    </div>
  </div>
</a>
<ul id='dropdown1' class='dropdown-content red darken-1'>
  <li ><a href="#!" class="black-text">Heizgeräte</a></li>
  <li class="divider" tabindex="-1"></li>
  <li><a href="#!" class="black-text">Ex-Heizgeräte</a></li>
  <li class="divider" tabindex="-1"></li>
  <li><a href="#!" class="black-text">Heizgebläse</a></li>
</ul>
<a  id='btndropdown2' class='dropdown-trigger' href="#" data-target='dropdown2'>
  <div class="col s2 m2">
    <div class="card cyan darken-1">
      <div class="card-content white-text">
        <span class="card-title center">Filterlüfter</span>
      </div>
      <div class="center">
        <i class="material-icons large white-text">view_headline</i>
      </div>
    </div>
  </div>
</a>
<ul id='dropdown2' class='dropdown-content cyan'>
   <li ><a href="#!" class="black-text">Filterlüfter</a></li>
   <li class="divider" tabindex="-1"></li>
   <li><a href="#!" class="black-text">Outdoor-Filterlüfter</a></li>
   <li class="divider" tabindex="-1"></li>
   <li><a href="#!" class="black-text">Dach-Filterlüfter</a></li>
   <li class="divider" tabindex="-1"></li>
   <li><a href="#!" class="black-text">Lüftereinschub</a></li>
   <li class="divider" tabindex="-1"></li>
   <li><a href="#!" class="black-text">Einbaulüfter</a></li>
 </ul>

you can see solution here : jsFiddle

Upvotes: 1

Related Questions