我正在为 OpenCart 中的新模板使用 Materialize 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
最佳答案
事情是这样的，materialze.css 中的 ID 搜索是库固有的，它也有点道理，因为 javascript 还如何知道通过单击按钮触发哪个下拉菜单？作为我能想到的解决方法，您可以做的是为您通过 PHP 循环创建的每个下拉菜单生成不同的 ID。假设您在每个循环中生成下拉菜单，我可以想到一种非常简单的方法来执行此操作。你可以在你的 PHP 循环中有一个计数器，每次只用这个循环变量替换你的 php 代码的 ID 部分。希望这可以帮助!干杯!
关于javascript - 如何让 Materialise 使用下拉列表类而不是 ID？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40806912/