我正在使用一个下拉菜单和一个带有选择下拉菜单的表单。
问题是，当我打开表单中的下拉菜单并选择第一个选项(“1”)时，菜单会自动打开。
如果我使用一些 <br>或者在表单 div 中放置一些边距顶部，这不会发生，所以我认为这与菜单与表单的接近度有关，但我无法弄清楚发生了什么。
这是正在发生的事情的一个例子(或者作为 jsfiddle ):
#menu {
position: relative;
z-index: 1;
clear: both;
}
#nav{
height: 39px;
font: 14px Arial,Verdana,sans-serif;
background: #f8f8f8;
border: 1px solid #DDDDDD;
border-radius: 3px;
min-width:500px;
margin-left: 0px;
padding-left: 0px;
}
#nav li{
list-style: none;
display: block;
float: left;
height: 40px;
position: relative;
border-right: 1px solid #DDDDDD;
}
#nav li a{
padding: 0px 30px 0px 30px;
margin: 0px 0;
line-height: 40px;
text-decoration: none;
border-right: 1px solid #DDDDDD;
height: 40px;
color: #6791AD;
font-weight: bold;
}
#nav ul{
background: #f2f5f6;
padding: 0px;
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-left:1px solid #DDDDDD;
border-radius: 0px 0px 3px 3px;
box-shadow: 2px 2px 3px #ECECEC;
-webkit-box-shadow: 2px 2px 3px #ECECEC;
-moz-box-shadow:2px 2px 3px #ECECEC;
width:200px;
}
#nav li:hover{
background: white;
}
#nav li a{
display: block;
}
#nav ul li {
border-right:none;
border-bottom:1px solid #DDDDDD;
width:200px;
height:39px;
}
#nav ul li li {
background: #f2f5f6;
padding: 0px;
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-left:1px solid #DDDDDD;
border-radius: 0px 0px 3px 3px;
box-shadow: 2px 2px 3px #ECECEC;
-webkit-box-shadow: 2px 2px 3px #ECECEC;
-moz-box-shadow:2px 2px 3px #ECECEC;
width:200px;
}
#nav ul li ul {
background: #f2f5f6;
padding: 0px;
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-left:1px solid #DDDDDD;
border-radius: 0px 0px 3px 3px;
box-shadow: 2px 2px 3px #ECECEC;
-webkit-box-shadow: 2px 2px 3px #ECECEC;
-moz-box-shadow:2px 2px 3px #ECECEC;
width:200px;
}
#nav ul li a {
border-right: none;
color:#6791AD;
text-shadow: 1px 1px 1px #FFF;
border-bottom:1px solid #FFFFFF;
}
#nav ul li:hover{background:#DFEEF0;}
#nav ul li:last-child { border-bottom: none;}
#nav ul li:last-child a{ border-bottom: none;}
/* Sub menus */
#nav ul{
display: none;
visibility:hidden;
position: absolute;
top: 40px;
}
/* Third-level menus */
#nav ul ul{
top: 0px;
left:200px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
}
/* Fourth-level menus */
#nav ul ul ul{
top: 0px;
left:170px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
}
#nav ul li{
display: block;
visibility:visible;
}
#nav li:hover > ul{
display: block;
visibility:visible;
}<div id='menu'>
<ul id='nav'>
<li>
<a href='#'>Level 1</a>
<ul>
<li><a href='#'>Level 1-1</a>
<ul>
<li><a href='#'>Level 1-1-1</a></li>
<li><a href='#'>Level 1-1-2</a></li>
</ul>
</li>
<li><a href='#'>Level 1-2</a>
<ul>
<li><a href='#'>Level 1-2-1</a></li>
<li><a href='#'>Level 1-2-2</a></li>
</ul>
</li>
<li><a href='#'>Level 1-3</a>
<ul>
<li><a href='#'>Level 1-3-1</a></li>
<li><a href='#'>Level 1-3-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class='form'>
<form>
<select>
<option selected='true'> 1 </option>
<option> 2 </option>
<option> 3 </option>
</select>
<input type='button' value="Go"/>
</form>
</div>
最佳答案
这是一个与 Chrome(闪烁？)相关的错误。 Chrome 尝试“重置”光标位置的菜单悬停状态。你可以试试这个肮脏的解决方案:
Javascript(使用 JQuery):
$(function(){
$("select").click(function(){
$("body").addClass("select-activated");
setTimeout(function(){
$("body").removeClass("select-activated");
}, 200);
});
});
在您的 CSS 中:
body.select-activated #nav ul {
display: none;
}
这将保护菜单显示免受“恢复过程”的影响。
我建议您在 Chromium Issues site 上报告此错误
更新
This JSFiddle演示原始版本和固定版本。在 Debian 7.6 上的 Chrome 35.0.1916.153 中测试。
关于html - 选择选择选项打开下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25894645/
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co
状态:我正在构建一个应用程序，其中需要一个可供用户选择颜色的字段，该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”，并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中，因此使用基
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda