jquery - jqTransform Select 在 Fancybox 中不起作用

标签 jquery select drop-down-menu fancybox jqtransform

当它位于 fancybox 中时,jQTransform 似乎没有正确设置 SELECT 的 UL 标签的高度。高度始终为 0,这意味着当您单击打开它时,选项不可见。我尝试过强制它设置打开高度,但使用该解决方案时,需要点击 6-7 次才能使其粘住(即不好)。有谁知道如何让它们很好地协同工作吗?它甚至不能与默认 CSS 一起使用。其他表单元素似乎工作正常。只是不选择。

我只有几天时间才能在截止日期前完成,因此非常感谢您的帮助。下面是我用来测试的 2 个文件中的非常简单的代码片段。

主机.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="includes/shared/js/jquery-latest.js" type="text/javascript"></script>
<link rel="stylesheet" href="includes/shared/js/jqtransformplugin/jqtransform.css" type="text/css" media="all" />
<link rel="stylesheet" href="includes/shared/js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="includes/shared/js/jqtransformplugin/jquery.jqtransform.js" ></script>  
<script type="text/javascript" src="includes/shared/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
</head>
<body>
<a class="fancybox" href="lightbox.html">Test</a>
<script type="text/javascript">
$('.fancybox').fancybox({
    'transitionIn'  :   'elastic',
    'transitionOut' :   'elastic',
    'speedIn'       :   200, 
    'speedOut'      :   200,
    'overlayColor'  :   '#000', 
    'overlayShow'   :   true
});
</script>
</body>
</html>

lightbox.html

<div id="box" style="min-height: 400px;">
<form id="book_event_form2" method="POST">
<select name="childTickets" class="childTickets" style="width: 50px;">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</form>
</div>
<script type="text/javascript">
jQuery('#book_event_form2').jqTransform();
</script>

最佳答案

我没有答案,但我遇到了类似的问题。问题似乎是当外部元素设置为“display”none,或者甚至“.jqTransformSelectWrapper”的 div 设置为 display: none 时。

我不知道如何修复输出,但我已将其范围缩小到类似的范围。

我愿意打赌这是插件本身的某种错误。

编辑

我知道这在技术上并不能解决问题,但它至少可以让它工作......

我发现,如果我使用 CSS 来定位 UL 并为其指定“自动”高度,它似乎对我有用。

简单地工作:

.jqTransformSelectWrapper ul {height: auto;}

关于jquery - jqTransform Select 在 Fancybox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7956558/

相关文章:

javascript - 使 em 单位相对于不是父级的祖先

asp.net - 未调用下拉列表的自定义验证器(显然)

javascript - 根据数据库中的下拉值设置 td 填充的背景颜色

javascript - jQuery AJAX 中的 Response 包含哪些内容?

javascript - 我的 addClass 和 removeClass 代码似乎不适用于 Bootstrap Glyphicons

mysql - 如何选择表 a 中的所有行,这些行具有表 b 中给出的 n 个特征

json - jq:如何选择不同结构的元素

javascript - 使用 JavaScript 重置下拉列表

javascript - 如何使用使用 for 循环和变量的 JQuery 定义 SCSS 关键帧?

mysql - 如何在多个表中查询表具有相同列名的记录