0

在隐藏元素中使用 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 时,它在显示所述隐藏元素时无法正确显示。

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

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

任何帮助都会很棒。

4

2 回答 2

1

演示

$(document).ready(function(){
    $('.dropkick').dropkick();
    $('#selectDiv').hide();
});
于 2013-06-05T16:50:20.980 回答
1

在显示 dropkick 的父元素以正确计算其宽度后,您需要应用 dropkick,它会在您的单击或任何使您的元素可见的函数中工作如下:

$('#selectDiv').slideDown(500);
$('.dropkick').dropkick();
return false;
于 2013-06-05T16:48:37.397 回答