如何在Dropkick插件的CSS中单独定位多个下拉列表 [英] How to individually target multiple dropdowns in CSS for Dropkick Plug-in

问题描述

跟进：如何通过修改自定义样式下拉列表的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。

How can I assign a custom ID or otherwise individually target each dk_toggle instance? I am creating multiple dropdowns, but the only way to modify the width (per linked question) is to target the dk_toggle class, which does not have an ID assigned to each instance.

推荐答案

DropKick有主题，所以你会做这样的事情：

DropKick has themes, so you would do something like this:

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

然后是你的风格：

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

这篇关于如何在Dropkick插件的CSS中单独定位多个下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！