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>

如何让Materialise使用类来下拉而不是ID？

2 个答案: