如何在 CSS 中为 Dropkick 插件单独定位多个下拉菜单

IT技术 javascript jquery jquery-plugins
2021-03-22 09:38:53

跟进: 如何通过修改这个制作自定义样式下拉菜单的 jQuery 插件来获得以相对单位而不是 px 为单位的输出?

参考:http : //jamielottering.github.com/DropKick/

鉴于以下JS:

    dropdownTemplate = [
  '<div class="dk_container" id="dk_container_{{ id }}" tabindex="{{ tabindex }}">',
    '<a class="dk_toggle">',
      '<span class="dk_label">{{ label }}</span>',
    '</a>',
    '<div class="dk_options">',
      '<ul class="dk_options_inner">',
      '</ul>',
    '</div>',
  '</div>'
].join(''),

如何分配自定义 ID 或以其他方式单独定位每个 dk_toggle 实例?我正在创建多个下拉列表,但修改宽度(每个链接问题)的唯一方法是定位 dk_toggle 类,该类没有分配给每个实例的 ID。

2个回答

分配唯一 ID 将是模板解析器的工作。您没有提到您使用的是哪个模板引擎。一般的想法是将下拉数据以及对上面定义的模板的引用传递给模板解析器。解析器会将 id 值注入到正确的模板元素中,然后您就可以开始比赛了。

模板解析器?Dropkick 仅包含一个 javascript 文件和 2 个 css 文件。不确定模板解析器是什么或者它是如何集成的。如果这很重要,Jquery 包含在包中。
2021-05-05 09:38:53

DropKick 有主题,所以你会做这样的事情:

$('select.a').dropkick({ theme: 'black' });
$('select.b').dropkick({ theme: 'white' });

然后在你的风格中:

.dk_theme_black { background:black; color:white;}
.dk_theme_white { background:white; color:black;}