在隐藏元素中使用dropkick时遇到问题。
我在这里嘲笑了一个演示:http://jsfiddle.net/C6NuL/
HTML
<p>It should look similar to this</p>
<div>
<select class="dropkick">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
<option>Option Four</option>
<option>Option 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 One</option>
<option>Option Two</option>
<option>Option Three</option>
<option>Option Four</option>
<option>Option Five</option>
</select>
</div>
JQuery的
$(document).ready(function(){
$('.dropkick').dropkick();
});
问题很简单,当在隐藏元素中的选择列表上使用dropkick时,它在显示隐藏元素时无法正确显示。
任何人都可以解释发生了什么,或者我如何解决这个问题?
我确信它与没有宽度的隐藏元素有关,但不知道如何解决它。
任何帮助都会很棒。
答案 0 :(得分:1)
在显示dropkick的父元素以正确计算其宽度后,您需要应用dropkick,它会在您的单击或任何使元素可见的函数中起作用:
$('#selectDiv').slideDown(500);
$('.dropkick').dropkick();
return false;
答案 1 :(得分:1)
$(document).ready(function(){
$('.dropkick').dropkick();
$('#selectDiv').hide();
});