隐藏元素中的 Jquery Dropkick 无法正确显示答案

【问题标题】：Jquery Dropkick within hidden element not displaying properly隐藏元素中的 Jquery Dropkick 无法正确显示
【发布时间】：2013-06-05 16:44:55
【问题描述】：

在隐藏元素中使用 dropkick 时遇到问题。

我在这里模拟了一个演示：http://jsfiddle.net/C6NuL/

HTML

<p>It should look similar to this</p>
<div>
    <select class="dropkick">
        <option>Option&nbsp;One</option>
        <option>Option&nbsp;Two</option>
        <option>Option&nbsp;Three</option>
        <option>Option&nbsp;Four</option>
        <option>Option&nbsp;Five</option>
    </select>
</div>
<div style="clear:both;">
<a href="#" onclick="$('#selectDiv').slideDown(500);return false;">click me</a> 
</div>
<div id="selectDiv" style="display:none;">
    <p>But it ends up looking like this</p>
    <select class="dropkick">
        <option>Option&nbsp;One</option>
        <option>Option&nbsp;Two</option>
        <option>Option&nbsp;Three</option>
        <option>Option&nbsp;Four</option>
        <option>Option&nbsp;Five</option>
    </select>
</div>

JQuery

$(document).ready(function(){
    $('.dropkick').dropkick();
});

问题很简单，当在隐藏元素内的选择列表上使用 dropkick 时，它在显示所述隐藏元素时无法正确显示。

谁能解释发生了什么，或者我可以如何解决这个问题？

我确信它与没有宽度的隐藏元素有关，但不知道如何修复它。

任何帮助都会很棒。

【问题讨论】：

标签： jquery jquery-dropkick

【解决方案1】：

您需要在显示父元素后应用 dropkick 以供 dropkick 正确计算其宽度，它会在您的点击或任何使您的元素可见的功能中发挥类似的作用：

$('#selectDiv').slideDown(500);
$('.dropkick').dropkick();
return false;

【讨论】：

这行得通，问题是我有几个隐藏部分，所以需要专门针对个别下拉菜单。这是 dropkick 库中的一个小缺陷，确实让人失望。
这有点烦人，在那种情况下，您必须为每个隐藏的选择器使用 ID 选择器。
是的，你会的，但是当我调用显示隐藏元素的方法时，将它带到最后，这对我来说很好。

【解决方案2】：

Demo

$(document).ready(function(){
    $('.dropkick').dropkick();
    $('#selectDiv').hide();
});

【讨论】：

虽然这行得通，但我不喜欢在文档存在后隐藏 div 的想法，这可能会导致元素在一瞬间可见，所以我不将此标记为正确答案.