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

Posted 2023-05-09

【中文标题】如何在 CSS 中为 Dropkick 插件单独定位多个下拉列表

【英文标题】：How to individually target multiple dropdowns in CSS for Dropkick Plug-in

【发布时间】：2012-07-30 23:27:17

【问题描述】：

跟进：How to get the output in relative units instead px by modifying this jQuery plugin of making custom style dropdown?

参考：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。

【问题讨论】：

直到有人解决这个问题，我推荐纯CSS解决方案而不是这个插件：***.com/a/10190884/1318135

【参考方案1】：

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

【讨论】：

模板解析器？ Dropkick 仅包含一个 javascript 文件和 2 个 css 文件。不确定模板解析器是什么或它是如何集成的。如果重要的话，Jquery 会包含在包中。

【参考方案2】：

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;