所以我有一个jquery多重选择下拉框(下拉框内的复选框),
我试图实现这一点,以便它看起来像一个菜单,将鼠标悬停在提供的div上会弹出。所以这是我的代码
ASP代码:
<div class="box">
SORT?
<div class="hiddencolumn" style="position: absolute; background-color:Black; height:auto;">
<asp:DropDownList ID="CompanyDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
</asp:DropDownList>
<br />
<asp:DropDownList ID="RegionDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
</asp:DropDownList>
<br />
<asp:DropDownList ID="AreaDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
</asp:DropDownList>
<br />
<asp:DropDownList ID="BranchDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
</asp:DropDownList>
<br />
<asp:DropDownList ID="StorageGroupDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
</asp:DropDownList>
<br />
<asp:DropDownList ID="SORDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
</asp:DropDownList>
<br />
<asp:DropDownList ID="TicketDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
</asp:DropDownList>
<br />
<asp:DropDownList ID="KaratDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
</asp:DropDownList>
<br />
<asp:DropDownList ID="PORIGINDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
</asp:DropDownList>
<br />
<asp:DropDownList ID="StatusDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
</asp:DropDownList>
<br />
<asp:DropDownList ID="ClassificationsDropDownList" Class="s10" runat="server" AppendDataBoundItems="True">
</asp:DropDownList>
<br />
<asp:Button ID="SortButton" runat="server" Text="Sort" OnClick="SortButton_Click" />
</div>
</div>
JavaScript For框下拉列表和悬停淡入
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$(".s10").dropdownchecklist( { firstItemChecksAll: true,forceMultiple: true, onComplete: function(selector) {
var values = "";
for( i=0; i < selector.options.length; i++ ) {
if (selector.options[i].selected && (selector.options[i].value != "")) {
if ( values != "" ) values += ";";
values += selector.options[i].value;
}
}
alert( values );
} });
$(function(){
$(".box").hover(function(){
$(this).find(".hiddencolumn").fadeIn();
}
,function(){
$(this).find(".hiddencolumn").fadeOut();
}
);
});
});
</script>
的CSS
.hiddencolumn
{
display: none;
}
当我在Div上删除Hidden列类时(例如,删除display:none;
),
渲染是正确的:
问题是当我添加hiddenColumn
Class或display:none
在div上添加时,这就是渲染的结果
有什么帮助吗?或解决?任何指南将不胜感激。
基于类似的问题,您可以重播您的fadeOut
和fadeIn
:
// FadeOut with visibility : hidden
$(this).find(".hiddencolumn").fadeOut("slow", function() {
$(this).show().css({visibility: "hidden"});
});
// FadeIn with visibility : visible
$(this).find(".hiddencolumn").hide().css({visibility: "visible"}).fadeIn("slow");
问题是display: none
实际上从布局中删除了元素,因此它不再具有影响其他元素的高度或宽度,而只是简单地更改元素的opacity
,例如使用.animate({opacity:1})
可使元素100%不透明,但是元素仍然对事件(例如鼠标)做出响应点击。visibility: hidden
是唯一的CSS规则,可在布局中呈现元素的轮廓,但不会以其他方式呈现给用户。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句