Jquery Hide/show destroy Chosen Plugin CSS

Question

<script>
$(document).ready(function(e) {
    $("#b").hide();
    $(".chosen").chosen();

    $("#a").click(function(){$("#b").show();});
});
</script>

<p id="a">aaaa</p>

<div id="b">
<select class="chosen">
<option>Classification</option>
<option>aaaa</option>
<option>bbb</option>
</select>
</div>

我有选择下拉列表使用选择插件.但是当我尝试隐藏表单并使用click来显示表单时,所选的css布局将被破坏.

有谁知道如何解决这个问题？

这是小提琴:

http://jsfiddle.net/cZV6G/

Answer 1

是的,你可以尝试设置visibility元素.

要解决此问题,您可以使用visibility:hidden而不是.hide()显示下拉使用visibility:visible而不是.show().

试试这段代码:

$(document).ready(function(e) {
    $("#b").css('visibility','hidden');
    $(".chosen").chosen();
    $("#a").click(function(){$("#b").css('visibility','visible');});
});

尝试是jsfiddle

更新:解决可见性问题

jquery没有问题.hide().真正的问题是,在应用之前隐藏元素.chosen().但是如果你在应用之后尝试隐藏元素.chosen(),那么它可以正常工作.

$(document).ready(function(e) {
    $(".chosen").chosen();
    $("#b").hide();
    $("#a").click(function(){$("#b").show();});
});

试试.hide()