jQuery Chosen div落后于Twitter Bootstrap手风琴

Question

我在Twitter Bootstrap手风琴中使用了jQuery Chosen插件.我遇到的问题是Chosen插件的下拉菜单出现div在手风琴菜单的"下面" .我试图将其设置z-index为更高的值,但这并没有成功.

我举了一个问题的例子:http://jsfiddle.net/8BAZY/1/

如果您单击该select框,您将看到菜单显示在div.如何将下拉列表显示在手风琴div的顶部,以便我可以看到所有结果？

Answer 1

有关此选定问题的更多信息,请访问 https://github.com/harvesthq/chosen/issues/86

一个解决方案基于PilotBob在该页面上给出的建议 http://jsfiddle.net/8BAZY/6/

$(function() {
    var els = jQuery(".chzn-select");
    els.chosen({no_results_text: "No results matched"});
    els.on("liszt:showing_dropdown", function () {
            $(this).parents("div").css("overflow", "visible");
        });
    els.on("liszt:hiding_dropdown", function () {
            $(this).parents("div").css("overflow", "");
        });
});

谢谢.

Answer 2

Sudhir发布的解决方案为我工作,除了它有一个小问题:当你在div中有多个选择控制并且你扩展了其他选择而有一个已经扩展时,新的将落在手风琴之后.这是因为第一个下拉列表在第二个下拉列表展开后将溢出设置为隐藏.这是修复.

$(function () {
   fixChoosen();
});

function fixChoosen() {
   var els = jQuery(".chosen-select");
   els.on("chosen:showing_dropdown", function () {
      $(this).parents("div").css("overflow", "visible");
   });
   els.on("chosen:hiding_dropdown", function () {
      var $parent = $(this).parents("div");

      // See if we need to reset the overflow or not.
      var noOtherExpanded = $('.chosen-with-drop', $parent).length == 0;
      if (noOtherExpanded)
         $parent.css("overflow", "");
   });
}

Answer 3

问题是因为.collapse有overflow: hidden。显然，绝对位置选定的下拉列表将被剪切。– dfsq 2天前

Answer 4

它不优雅,但你可以这样做:

#collapseOne {
    overflow: hidden;
}
#collapseOne.in {
    overflow: visible;
}

这将确保折叠时剪切,并在显示时可见.