Jquery Hide/show destroy Chosen Plugin CSS答案

【问题标题】：Jquery Hide/show destroy Chosen Plugin CSSJquery Hide/show destroy Chosen Plugin CSS
【发布时间】：2013-10-26 07:23:58
【问题描述】：

<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>

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

有人知道怎么解决吗？

这里是小提琴：

http://jsfiddle.net/cZV6G/

【问题讨论】：

你的小提琴不起作用。如果您要为您的问题附加一个小提琴，请在这样做之前确保它可以正常工作。
怎么回事，我刚查了一下，没有问题
500 从您的网站加载资源时出现服务器错误。
我不知道，我这边没问题

标签： jquery jquery-chosen

【解决方案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()

【讨论】：

它有效！非常感谢！，你知道如何更改选择的默认字体吗？我尝试更改 selected.css font-family:Arial;但它不工作
但您可以尝试更改插件 css 类（chosen.css）。有一个“.chosen-container”类，您可以在其中尝试放置您的字体样式。我希望这将帮助您完成任务
我还有 1 个问题，如果我使用可见性，我的布局会有很大的差距，因为元素仍然存在
可见性只是让元素看不到，但仍然存在，因此它仍然有宽度高度，它之间会有一个空白:(
是的，你是对的。 visibility:hidden 只隐藏元素，但它仍然占用布局中的空间。但是如果你愿意，有很多方法存在，元素不占用空间。您可以设置元素的高度：0，并在元素可见时设置实际高度。

【解决方案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>

【讨论】：