2013-06-05 40 views
0

在隐藏元素中使用dropkick时遇到问题。隐藏元素内的Jquery 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(); 
}); 

这个问题很简单,上内选择列表中使用踢反弹球时,隐藏的元素在显示时无法正确显示说隐藏的元素。

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

我确定它与隐藏的元素没有宽度有关,但不知道如何解决它。

任何帮助都会很棒。

回答

1

您将需要应用踢反弹球告诉你的踢反弹球的父元素之后正确地计算它的宽度,它会工作像这样在点击或任何功能,使你的元素可见:

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

这个作品,麻烦是我有几个隐藏的部分,所以需要专门针对个人的下拉。这是dropkick库中的一个小缺陷,它真的让它失望。 – jimplode

+0

使它有点烦人,那么你将不得不为这种情况下的每一个隐藏的ID选择器使用ID选择器。 – Dan

+0

是的,你会的,但因为我正在调用方法来显示隐藏的元素,使其对我的工作很好。 – jimplode

1

Demo

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

尽管这样做有效,但我不喜欢在文档存在时隐藏div的想法,它可能会导致元素在瞬间可见,所以我不会将其标记为正确的答案。 – jimplode