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>

我选择下拉列表使用Chosen Plugin。但是当我尝试隐藏表单并使用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');});
});

Try is jsfiddle

更新：解决可见性问题

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

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

Try with .hide()

Answer 2

我迟到了这篇文章，但我想分享我在这种情况下的经验。

在初始化所选元素之前隐藏元素没有问题。

我所做的是在初始化所选元素时应用 width 属性。

$("#yourSelect").chosen({ width: "100%" })

Ref.Doc 选择框的宽度。默认情况下，Chosen 会尝试匹配您要替换的选择框的宽度。如果实例化 Chosen 时隐藏了选择，则必须指定宽度，否则选择将显示为 0。

示例如下：

$( document ).ready(function() {
    //select element is initialised when it is hidden.
    $("#select1").chosen({ width: "100%" });
    
    $("#showBtn").on("click",function(){
      $("#wrapper").removeClass("hidden");
    })
});

.hidden{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

<div class="hidden" id="wrapper">
  <select id="select1">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
  </select>
</div>

<button id="showBtn">Show the select element</button>

Jquery Hide / show destroy Chosen Plugin CSS

2 个答案: