Javascript 仅使用CSS自定义引导中的切换按钮？

我有一个使用引导开关下拉按钮的演示。我自定义了bootstrap.css，但没有自定义bootstrap.js。我可以在没有boostrap.js的情况下使用toggle吗

以下是片段：

$document.readyfunction{ $'firstvalue'.addClass'user-click'； $'usr'.val+$firstTag.text+； $'demolist li a'。单击，函数{ $'.user click'.removeClass'user-click'； $this.find'.user check'.addClass'user-click'； $'usr'.val+$this.text+； }; }; .用户检查{ 光标：指针； 显示：块； 高度：16px； 保证金：0px 0px 0px 0px； 大纲：0无； 填充：8px 5px 0px 0px； 位置：相对位置； 顶部：1px； 宽度：16px； z指数：1； 浮动：左； } 。用户单击：在{ 底部：10px； 内容：\2713； 显示：块； 位置：相对位置； 右：0px； 变换：旋转15度； 转换：所有1都从0中释放； 宽度：14px； 字体大小：15px； 颜色：4444； } .btnAlpha逆{ 颜色：fff； 高度：20px； 宽度：20px； 背景色：4444； 边框颜色：4444； /*在此处设置所需的颜色*/ } .btnAlpha反向：悬停， .btnAlpha反向：聚焦， .btnAlpha反向：激活， .btnAlpha-inverse.active， .btnAlpha-inverse.disabled， .btnAlpha反向[禁用]{ 颜色：ffffff； 背景色：4444； *背景色：4444； } B.纳帕小酒店{ 填充：2x10px； 字体大小：11.9px； -webkit边界半径：3px； -moz边界半径：3px； 边界半径：3px； } .下拉标题{ 显示：块； 填充：3px20px； 字体大小：12px； 线高：1.42857143； 颜色：4444； 空白：nowrap； 字体大小：粗体； } .下拉菜单>li>a:悬停， .下拉菜单>li>a:焦点， .下拉子菜单：悬停>a， .下拉子菜单：焦点>a{ 文字装饰：无； 颜色：4444； 背景色：F5； 背景图像：-moz linear gradienttop、F5、F5； 背景图像：-webkit gradientlinear，0 0，0 100%，从F5到F5； 背景图像：-webkit linear gradienttop、F5、F5； 背景图像：-o-linear-gradienttop、F5、F5； /*背景图像：线性渐变至底部，0088cc，0077b3*/ 背景重复：重复-x； 过滤器：progid:DXImageTransform.Microsoft.gradientstartColorstr='ff0088cc'，endColorstr='ff0077b3'，GradientType=0； } .btnAlpha组alpha lg>.btnAlpha， btnAlpha lg{ 填充：10px 16px； 字号：18px； 线高：1.3333； 边界半径：6px } .btnAlpha-groupAlpha-sm>.btnAlpha， btnAlpha sm{ 填充物：5px10px； 字体大小：12px； 线高：1.5； 边界半径：3倍 } .btnAlpha组alpha xs>.btnAlpha， .btnAlpha xs{ 填充物：1px 5px； 字体大小：12px； 线高：1.5； 边界半径：3倍 } B.btnAlpha区块{ 显示：块； 宽度：100% } .btnAlpha组Alpha垂直>.btnAlpha， .btnAlpha组α>.btnAlpha{ 位置：相对位置； 浮动：左 } .btnAlpha组alpha垂直>.btnAlpha.active， .btnAlpha组Alpha垂直>.btnAlpha:活动， .btnAlpha组Alpha垂直>.btnAlpha：焦点， .btnAlpha组Alpha垂直>.btnAlpha:悬停， .btnAlpha groupAlpha>.btnAlpha.active， .btnAlpha组Alpha>.btnAlpha:活动， .btnAlpha-groupAlpha>.btnAlpha:focus， .btnAlpha组Alpha>.btnAlpha:悬停{ z指数：2 } .btnAlpha组α.btnAlpha+.btnAlpha， .btnAlpha-groupAlpha.btnAlpha+.btnAlpha-groupAlpha， .btnAlpha组α.btnAlpha组α+.btnAlpha， .btnAlpha groupAlpha.btnAlpha groupAlpha+.btnAlpha groupAlpha{ 左边距：-1px } .btnAlpha工具栏{ 左边距：-5px } .btnAlpha工具栏.btnAlpha， .btnAlpha工具栏.btnAlpha组alpha， .btnAlpha工具栏.输入组{ 浮动：左 } .btnAlpha工具栏>.btnAlpha， .btnAlpha工具栏>.btnAlpha组Alpha， .btnAlpha工具栏>.input组{ 左边距：5px } .btnAlpha groupAlpha>.btnAlpha:not:第一个孩子：not:最后一个孩子：not.dropdown-toggle{ 边界半径：0 } .btnAlpha groupAlpha>.btnAlpha:第一个孩子{ 左边距：0 } .btnAlpha groupAlpha>.btnAlpha:第一个孩子：不是：最后一个孩子：不是。下拉切换{ 边框右上角半径：0； 边框右下角半径：0 } .btnAlpha groupAlpha>.btnAlpha:最后一个孩子：不是第一个孩子， .btnAlpha groupAlpha>。下拉切换：非：第一个孩子{ 边框左上半径：0； 边框左下半径：0 } .btnAlpha groupAlpha>.btnAlpha groupAlpha{ 浮动：左 } .btnAlpha groupAlpha>.btnAlpha groupAlpha:not:第一个孩子：not:最后一个孩子>.btnAlpha{ 边界半径：0 } .btnAlpha groupAlpha>.btnAlpha groupAlpha:第一个孩子：不是：最后一个孩子>.btnAlpha:最后一个孩子， .btnAlpha groupAlpha>.btnAlpha groupAlpha:第一个孩子：不是：最后一个孩子>。下拉切换{ 边框右上角半径：0； 边框右下角半径：0 } .btnAlpha groupAlpha>.btnAlpha groupAlpha:最后一个孩子：不是第一个孩子>.btnAlpha:第一个孩子{ 边框左上半径：0； 边框左下半径：0 } .btnAlpha组Alpha.下拉切换：活动， .btnAlpha-groupAlpha.open.下拉开关{ 大纲：0 } .btnAlpha groupAlpha>.btnAlpha+.下拉切换{ 填充装置 t:8px； 左侧填充：8px } .btnAlpha groupAlpha>.btnAlpha lg+。下拉切换{ 右侧填充：12px； 左侧填充：12px } .btnAlpha-groupAlpha.open.下拉开关{ -webkit盒阴影：插入0 3px 5px rgba0,0,0,125； 长方体阴影：插入0 3px 5px rgba0,0,0,125 } .btnAlpha-groupAlpha.open.dropdown-toggle.btnAlpha-link{ -webkit盒阴影：无； 盒影：无 } B.插入符号{ 左边距：0 } .btnAlpha lg.插入符号{ 边框宽度：5px5px0； 边框底部宽度：0 } .dropup.btnAlpha lg.插入符号{ 边框宽度：0 5px 5px } .btnAlpha组Alpha垂直>.btnAlpha， .btnAlpha groupAlpha vertical>.btnAlpha groupAlpha， .btnAlpha groupAlpha vertical>.btnAlpha groupAlpha>.btnAlpha{ 显示：块； 浮动：无； 宽度：100%； 最大宽度：100% } .btnAlpha groupAlpha vertical>.btnAlpha groupAlpha>.btnAlpha{ 浮动：无 } .btnAlpha组alpha垂直>.btnAlpha+.btnAlpha， .btnAlpha groupAlpha vertical>.btnAlpha+.btnAlpha groupAlpha， .btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha+.btnAlpha， .btnAlpha groupAlpha vertical>.btnAlpha groupAlpha+.btnAlpha groupAlpha{ 页边顶部：-1px； 左边距：0 } .btnAlpha groupAlpha vertical>.btnAlpha:not:第一个孩子：not:最后一个孩子{ 边界半径：0 } .btnAlpha groupAlpha vertical>.btnAlpha:第一个孩子：不是：最后一个孩子{ 边框右上角半径：4px； 边框右下半径：0； 边框左下半径：0 } .btnAlpha groupAlpha vertical>.btnAlpha:最后一个孩子：不是第一个孩子{ 边框左上半径：0； 边框右上角半径：0； 边框左下半径：4px } .btnAlpha groupAlpha vertical>.btnAlpha groupAlpha:not:第一个孩子：not:最后一个孩子>.btnAlpha{ 边界半径：0 } .btnAlpha groupAlpha vertical>.btnAlpha groupAlpha:first child:not:last child>.btnAlpha:last child， .btnAlpha groupAlpha vertical>.btnAlpha groupAlpha:first child:not:last child>。下拉切换{ 边框右下半径：0； 边框左下半径：0 } .btnAlpha groupAlpha vertical>.btnAlpha groupAlpha:last child:not:first child>.btnAlpha:first child{ 边框左上半径：0； 边框右上角半径：0 } .btnAlpha集团有限公司{ 显示：表格； 宽度：100%； 表布局：固定； 边界塌陷：分离 } .btnAlpha组alpha-justified>.btnAlpha， .btnAlpha-groupAlpha>btnAlpha-groupAlpha{ 显示：表格单元格； 浮动：无； 宽度：1% } .btnAlpha groupAlpha>btnAlpha groupAlpha.btnAlpha{ 宽度：100% } .btnAlpha groupAlpha>btnAlpha groupAlpha.下拉菜单{ 左：自动 } [数据切换=按钮]>.btnAlpha输入[类型=复选框]， [数据切换=按钮]>。btnAlpha输入[类型=单选]， [数据切换=按钮]>.btnAlpha组Alpha>.btnAlpha输入[类型=复选框]， [数据切换=按钮]>.btnAlpha组Alpha>.btnAlpha输入[类型=收音机]{ 位置：绝对位置； 剪辑：rect0,0,0,0； 指针事件：无 } .btnAlpha集团Alpha， .btnAlpha组α垂直{ 位置：相对位置； 显示：内联块； 垂直对齐：中间对齐 } .btnAlpha组α>.btnAlpha， .input group btnAlpha:first child>。下拉切换， .input group btnAlpha:last child>.btnAlpha groupα：not:last child>.btnAlpha， .input group btnAlpha:last child>.btnAlpha:not:last child:not.dropdown-toggle{ 边框右上角半径：0； 边框右下角半径：0 } .输入组加载项：第一个子项{ 右边框：0 } .输入组.窗体控件：最后一个子项， .输入组加载项：最后一个子项， .input group btnAlpha:first child>.btnAlpha groupα：not:first child>.btnAlpha， .输入组btnAlpha:first child>.btnAlpha:not:first child， .input group btnAlpha:最后一个子项>.btnAlpha， .input group btnAlpha:last child>.btnAlpha group Alpha>.btnAlpha， .input group btnAlpha:最后一个子项>。下拉切换{ 边框左上半径：0； 边框左下半径：0 } .输入组加载项：最后一个子项{ 左边框：0 } .输入组btnAlpha{ 位置：相对位置； 字号：0； 空白：nowrap } .input group btnAlpha>.btnAlpha{ 职位：相对 } .输入组btnAlpha>.btnAlpha+.btnAlpha{ 左边距：-1px } .input group btnAlpha>.btnAlpha:激活， .输入组btnAlpha>.btnAlpha:焦点， .input group btnAlpha>.btnAlpha:悬停{ z指数：2 } .输入组btnAlpha:first child>.btnAlpha， .input group btnAlpha:first child>.btnAlpha groupAlpha{ 右边距：-1px } .input group btnAlpha:最后一个子项>.btnAlpha， .input group btnAlpha:最后一个子项>.btnAlpha group Alpha{ z指数：2； 左边距：-1px } .btnAlpha组α.btnAlpha+.btnAlpha{ 左边距：-1px } .btnAlpha groupAlpha vertical>.btnAlpha groupAlpha:after， .btnAlpha groupAlpha vertical>.btnAlpha groupAlpha:before， .btnAlpha工具栏：之后， .btnAlpha工具栏：之前， .clearfix:之后， .clearfix:之前， .容器液体：之后， .容器液体：之前， .容器：之后， .货柜：在， .dl水平dd:， .dl水平dd：之前， .表格水平。表格组：之后， .表格水平。表格组：在， .modal页脚：在， .modal页脚：之前， .导航：之后， .导航：之前， 安娜女士 vbar崩溃：之后， .导航栏崩溃：之前， .导航栏标题：之后， .导航栏标题：之前， .navbar:之后， .navbar:之前， .寻呼机：之后， .寻呼机：之前， .委员会主体：之后， .委员会主体：在， .罗：之后， 在先{ 显示：表格； 内容： } .btnAlpha groupAlpha vertical>.btnAlpha groupAlpha:after， .btnAlpha工具栏：之后， .clearfix:之后， .容器液体：之后， .容器：之后， .dl水平dd:， .表格水平。表格组：之后， .modal页脚：在， .导航：之后， .导航栏崩溃：之后， .导航栏标题：之后， .navbar:之后， .寻呼机：之后， .委员会主体：之后， .罗：之后{ 清楚：两者都有 } .btnAlpha组alpha xs>.btnAlpha.badge， .btnAlpha xs.徽章{ 排名：0； 填充：1px 5px } a、 徽章：专注， a、 徽章：悬停{ 颜色：fff； 文字装饰：无； 光标：指针 } .打开>.下拉菜单{ 显示：块； } .下拉菜单{ 位置：绝对位置； 最高：100%； 左：0； z指数：1000； 显示：无； 浮动：左； 最小宽度：160px； 填充：5px0； 边际：2px0； 字体大小：14px； 文本对齐：左对齐； 列表样式：无； 背景色：fff； -webkit背景剪辑：填充框； 背景剪辑：填充框； 边框：1px实心ccc； 边框：1px实心rgba0,0,0,15； 边界半径：4px； -webkit盒阴影：0 6px 12px rgba0,0,0,175； 盒影：0 6px 12px rgba0,0,0,175； 字体系列：Helvetica Neue、Helvetica、Arial、无衬线字体； 字体大小：14px； 线高：1.42857143； 颜色：333； 背景色：fff； } .下拉标题{ 显示：块； 填充：3px20px； 字体大小：12px； 线高：1.42857143； 颜色：4444； 空白：nowrap； 字体大小：粗体； } .ul{ 边际上限：0； 边缘底部：10px； -webkit框大小：边框框； -moz框大小：边框框； 框大小：边框框； } .下拉菜单>li>a{ 显示：块； 填充：3px20px； 明确：两者皆有； 字体大小：400； 线高：1.42857143； 颜色：333； 空白：nowrap； 文字装饰：无； -webkit框大小：边框框； -moz框大小：边框框； 框大小：边框框； 背景色：透明； } 。未设置样式的列表{ 左侧填充：0； 列表样式：无 } .内联列表{ 左侧填充：0； 左边距：-5px； 列表样式：无 } .list inline>li{ 显示：内联块； 右侧填充：5px； 左侧填充：5px } v 搜索：

---

你在这里定制是什么意思？你想实现什么？@JSantosh:这是我的演示：。我使用bootstrap.js库进行编码。现在，我希望切换下拉菜单在没有引导库的情况下运行良好，因此我需要自定义代码并删除引导库。如果您希望在没有引导js的情况下使用引导下拉菜单功能，请执行以下操作。然后，只需从中使用下拉代码即可。它只有170行代码。@JSantosh：谢谢，它与boostrap.css集成了吗？我删除了boostrap.js并添加了dropdown.js，但效果不好。是的，它当然是集成的。正如您所说的，您不想使用JS，所以我只提供了JS文件。你能更新小提琴给新的链接吗