Question

如果我使用错误的术语，请提前道歉，我对jQuery很新。

我正在使用响应式设计的网站。在较小的屏幕尺寸下，菜单将通过带有选择下拉列表的jQuery / CSS替换。（我通过jQuery追加<select>字段，通过CSS将其默认为display:none，然后通过CSS媒体查询以较小的分辨率显示它。）

一切都很好，但似乎与another jQuery plugin I'm running发生冲突，它会在模态窗口中自动显示更大版本的图像。查看此页面，单击第一张图像，然后注意菜单下方显示的<select>。 http://preview.saratogaresources.com/corporate-governance/

这是我用来创建下拉列表的代码：

// Create the dropdown base
$("<select />").appendTo(".nav");

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Go to..."
}).appendTo(".nav select");

// Populate dropdown with menu items
$(".nav a").each(function() {
 var el = $(this);
 $("<option />", {
     "value"   : el.attr("href"),
     "text"    : el.text()
 }).appendTo(".nav select");
});

$(".nav select").change(function() {
  window.location = $(this).find("option:selected").val();
});

这是我的默认CSS：

.nav select {
display:none;

}

这是我的媒体查询：

@media all and (max-width: 800px) {

.nav .menu-top-menu-container {
    display:none;
}

.nav select {
    display:block;
    font-size:1em;
    margin:1em auto;
} 
}

lightbox插件在我正在运行的大多数网站上运行良好，所以我认为这是我的代码问题，但我不太了解jQuery。任何想法都将非常感谢，谢谢!!

Answer 1

我通过在

中运行我的jQuery来解决这个问题

jQuery(window).load(function($)

而不是

jQuery(document).ready(function($)

[编辑]：实际上我不相信以上是最终的解决方案。我认为发生的事情是在jQuery本身（最新版本，1.7.2）中，<select>字段的样式在模态之后被设置为""（空白，转换为inline-block）窗户关闭。如果我理解正确，这是<select>在早期版本的IE中具有一些可笑的高z-index的问题的“修复”，因此通过模态窗口显示。 jQuery将它们设置为display:none以进行模态窗口显示，然后在窗口关闭后重置它们。

但是，在我的情况下，这会将display: inline-block添加到我之前隐藏的<select>元素中。我通过向CSS添加!important声明修复了这两个地方显示：正在设置。呼！

jQuery附加的<select>，通常是隐藏的，在模态窗口使用后重新出现</select>

1 个答案: