如何讓Materialise使用下拉類而不是ID的類？

Question

我在OpenCart中爲我的新模板使用Materialise CSS（http://materializecss.com），現在我正在創建導航欄。當然，對於導航欄，我需要一個下拉菜單，並查看了此框架下拉按鈕的需求，但它需要一個唯一的ID來實際工作。

<!-- Dropdown Trigger --> 
    <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a> 

    <!-- 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="#!">three</a></li> 
    </ul> 

這不會在Opencart的工作，因爲它通過一組PHP代碼的循環，因此設置了相同的ID名稱具有子類在他們幾個菜單項。

如何更改此背後的Javascript以使其可以使用類而不是ID的？

編輯：

我相信這是觸發下拉的JS代碼。正如你看到它查找一個ID

// Click handler to show dropdown 
    origin.unbind('click.' + origin.attr('id')); 
    origin.bind('click.'+origin.attr('id'), function(e){ 
     if (!isFocused) { 
     if (origin[0] == e.currentTarget && 
      !origin.hasClass('active') && 
      ($(e.target).closest('.dropdown-content').length === 0)) { 
      e.preventDefault(); // Prevents button click from moving window 
      if (curr_options.stopPropagation) { 
      e.stopPropagation(); 
      } 
      placeDropdown('click'); 
     } 
     // If origin is clicked and menu is open, close menu 
     else if (origin.hasClass('active')) { 
      hideDropdown(); 
      $(document).unbind('click.'+ activates.attr('id') + ' touchstart.' + activates.attr('id')); 
     } 
     // If menu open, add click close handler to document 
     if (activates.hasClass('active')) { 
      $(document).bind('click.'+ activates.attr('id') + ' touchstart.' + activates.attr('id'), function (e) { 
      if (!activates.is(e.target) && !origin.is(e.target) && (!origin.find(e.target).length)) { 
       hideDropdown(); 
       $(document).unbind('click.'+ activates.attr('id') + ' touchstart.' + activates.attr('id')); 
      } 
      }); 
     } 
     } 
    }); 

    } // End else 

Answer 1

事情是這樣的，在materialze.css ID搜索固有的圖書館，它還挺有道理的，因爲太怎麼回事會的JavaScript知道與觸發該下拉按鈕點擊右鍵？你可以做的解決方法是我可以想到的是爲通過PHP循環創建的每個下拉菜單生成不同的id。假設在每個循環中生成下拉列表，我可以想到一個非常簡單的方法。你可以在你的PHP循環中有一個計數器，並且每次只用這個循環變量替換你的php代碼的ID部分。希望這可以幫助！乾杯!

Answer 2

感謝Nishant Bhattacharya，謝謝！

對於那些你想知道我是如何解決它：

<!-- Start Navbar --> 
    <nav> 
     <?php if ($categories) { ?> 
      <div class="container nav-wrapper"> 
       <a href="#" data-activates="mobile-offcanvas" class="button-collapse"><i class="mdi mdi-menu"></i></a> 
       <ul class="hide-on-med-and-down"> 
        <?php foreach ($categories as $category) { ?> 
         <?php if ($category['children']) { ?> 
          <li> 
           <?php $id = uniqid(); ?> 
           <a class="dropdown-button" href="#" data-activates="<?php echo $id; ?>"><?php echo $category['name']; ?></a> 
          </li> 
          <ul id='<?php echo $id; ?>' class='dropdown-content'> 
           <?php foreach (array_chunk($category['children'], ceil(count($category['children'])/$category['column'])) as $children) { ?> 
            <?php foreach ($children as $child) { ?> 
             <li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li> 
            <?php } ?> 
           <?php } ?> 
           <li><a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a></li> 
          </ul> 
         <?php } else { ?> 
          <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li> 
         <?php } ?> 
        <?php } ?> 
       </ul> 
       <ul class="side-nav" id="mobile-offcanvas"> 

       </ul> 
      </div><!-- /container nav-wrapper --> 
     <?php } ?> 
    </nav> 
<!-- End Navbar --> 

這段代碼是非常重要的：

<?php $id = uniqid(); ?> 

然後回聲的那部分數據，激活部分：

<a class="dropdown-button" href="#" data-activates="<?php echo $id; ?>"><?php echo $category['name']; ?></a>