Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >HAML中的下拉菜单

HAML中的下拉菜单
EN

Stack Overflow用户
提问于 2013-12-06 01:06:20
回答 1查看 1.2K关注 0票数 1

我刚刚开始采用Haml,我遇到了一个问题,我似乎找不到解决方案。这可能只是因为我不知道在我的搜索中使用正确的html术语,但这导致我在这里发帖。

如何在haml中编写这样的一行代码:

代码语言:javascript
运行
AI代码解释
复制
<ul id="drop" data-dropdown-content class="f-dropdown">

或查看此链接以查看完整的上下文。https://gist.github.com/czepluch/7817008

EN

回答 1

Stack Overflow用户

发布于 2013-12-06 01:43:50

我猜这里有几个问题--创建布尔型属性和带有-的属性。

为了获得一个boolean attribute (即属性不带值出现),您可以使用true作为您的Haml中的值。您还需要确保格式为html4html5 (默认值为html5)。

不能使用无引号的符号作为属性值,因为连字符将被解释为减号,因此需要使用字符串。

所以将这些组合在一起,你想要的Haml是这样的:

代码语言:javascript
运行
AI代码解释
复制
%ul#drop.f-dropdown{"data-dropdown-class" => true}

这会产生:

代码语言:javascript
运行
AI代码解释
复制
<ul class='f-dropdown' data-dropdown-class id='drop'></ul>

Haml还支持使用散列的custom data attributes,因此您可以这样做:

代码语言:javascript
运行
AI代码解释
复制
%ul#drop.f-dropdown{:data => {"dropdown-class" => true}}

也会产生同样的结果。在这种情况下,这不会有太大帮助,当您有多个data-*属性时,它更有用--您可以将它们放在一个散列中,并且您只需要指定一次data前缀。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20414077

复制
相关文章
CSS 下拉菜单_下拉菜单html
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/01
7.2K0
Excel中如何制作下拉菜单
文字教程 准备好需要生成的清单 选择你想制作下拉菜单的单元格 依次点击数据→数据验证 在弹出的数据验证菜单中选择第一个设置页(默认也是这个) 在允许下面选择序列(会跳出一个来源) 点击选择按钮,选择序号1准备的清单 也可以手动输入清单,逗号得保证是英文逗号.例如输入 土建,渗漏,门窗 确定,完成 --- 图文教程 准备好需要生成的清单 [清单] 选择你想制作下拉菜单的单元格,然后依次点击数据→数据验证 [数据→数据验证] 在弹出的数据验证菜单中选择第一个设置页(默认也是这个) [设置页]
但老师
2020/02/27
1.7K0
Excel中如何制作下拉菜单
javascript下拉菜单代码(用jquery做下拉菜单)
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/126047.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/01
11.8K0
javascript下拉菜单代码(用jquery做下拉菜单)
HTML代码简写法:Emmet和Haml
HTML代码写起来很费事,因为它的标签多。 一种解决方法是采用模板, 在别人写好的骨架内,填入自己的内容。还有一种就是我今天想要介绍的方法----简写法。 常用的简写法,目前主要是Emmet和Haml
ruanyf
2018/04/13
1.5K0
HTML代码简写法:Emmet和Haml
bootstrap 下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body>  <div class="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> </ul> </div> </body> </html>
用户5760343
2019/07/05
4.7K0
WordPress 技巧:在下拉菜单中添加日历
在 WordPress 下拉菜单中添加日历,如果 WordPress 的菜单是通过后台拖拉生成的,那么在当前的主题中添加如下的代码:
Denis
2023/04/14
5000
WordPress 技巧:在下拉菜单中添加日历
如何在matlab中实现可编辑下拉菜单?
小编经过权衡后,选择了第三种方式来实现,并相关操作集成到一个名为popUpMenu的函数当中,如果需要使用直接调用即可,下面就一起来看看这个函数吧。
巴山学长
2020/06/03
2.4K0
在Excel中如何建立打勾和打叉的下拉菜单?
1、点击[数据] 2、点击[数据验证] 3、点击[数据验证] 4、点击[任何值] 5、点击[序列] 6、点击[来源] 7、点击[确定]
裴来凡
2022/05/28
2.6K0
在Excel中如何建立打勾和打叉的下拉菜单?
纯CSS写的下拉菜单
效果图,如上图所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; <html xmlns="http://www.w3.org/1999/xhtml"&gt; <head> <title></title> <style type="text/css"> menu { margin-left:auto
用户7108768
2021/09/24
2.4K0
html中下拉菜单(html做下拉菜单栏)
使用html5或者jQuery如何实现文本框下拉效果,如下图 CSS布局HTML小编今天和大家分享大神详解最好有可以使用HTML5 list 属性。list 属性需要应用到 input 框上,然后内容写一个自定义的 id 然后在任意位置放一对 datalist 标签,并给 datalist 框一个 id,和 list 属性指向的 id 一致即可。 在 datalist 标签下放列表项。
全栈程序员站长
2022/08/02
11.8K0
html中下拉菜单(html做下拉菜单栏)
级联下拉菜单的实现「建议收藏」
相信我们都会选择第一种方法,这样不仅增强了代码的复用性,而且当我们的需求变动,需要显示新的数据时,只要更新数据库就可以了。而第二种方法只能适用于某种情况,需求改变,就需要在代码中进行大量的修改。
全栈程序员站长
2022/08/09
1.3K0
纯CSS写的下拉菜单
效果图,如上图所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; <html xmlns="http://www.w3.org/1999/xhtml"&gt; <head> <title></title> <style type="text/css"> menu { margin-left:auto
用户7718188
2021/11/01
2.5K0
jQuery下拉菜单经典案例
jQuery下拉菜单经典案例  源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <
红目香薰
2022/11/29
11.4K0
jQuery下拉菜单经典案例
html导航栏可以展开的下拉菜单,html导航栏下拉菜单如何制作[通俗易懂]
小编给大家分享一下html导航栏下拉菜单如何制作,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
全栈程序员站长
2022/09/01
9.3K0
JavaScript案例:下拉菜单
案例分析 导航栏里面的li都要有鼠标经过效果,所以需要循环注册鼠标事件 核心原理:当鼠标经过li里面的第二个孩子ul显示,当鼠标离开,则ul隐藏 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w
岳泽以
2022/10/26
3.7K0
JavaScript案例:下拉菜单
jQuery练习——下拉菜单
实现效果:当鼠标移到不同的一级菜单,会显示相应的二级菜单,鼠标移走,二级菜单消失。
颜颜yan_
2022/12/01
27.4K0
jQuery练习——下拉菜单
级联下拉菜单效果
<!doctype html> <html> <head> <script src="jquery.js"></script> <script> $(function(){ $(".menu li,.menu ul li").mouseenter( function(){ $(this).children("ul").stop(true,true).slideDown(100).animate({opacity:1},20); } ).mouseleave( function(){ $(
用户1730674
2018/05/02
4.9K0
级联下拉菜单效果
ElementUI Dropdown 下拉菜单
在后台项目中,使用Dropdown 下拉菜单时,发现对el-dropdown-item绑定点击事件时,一直没有触发,比如:
py3study
2021/03/07
3.3K0
省份和城市的级联下拉菜单
一、效果图 二、代码 1、index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-
week
2018/08/24
3.7K0
省份和城市的级联下拉菜单
导航页下拉菜单
1、static :默认值 没有定位 元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)。
week
2018/08/24
3.4K0
导航页下拉菜单

相似问题

使用Rails的Haml下拉菜单问题

45

包含Haml的表格内的下拉菜单

10

具有下拉菜单的HAML form_tag问题

10

使用Haml视图对下拉菜单数据进行排序

110

将locale传递给haml中的javascript haml

12
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档