Question

我正在尝试为我正在处理的网站设置bootstrap-select.js（Magento ver.1.9.1.0），我遇到了一些我无法解决的问题。

所有内容都完美加载，但是当我在下拉列表选择列表中选择一个选项时，整个选择会通过将element.style添加到其上而消失：

style="display:none;"

在FireBug中它说：

element.style {
display: none;
}

请在此处查看视觉图像：http://i.imgur.com/cg1jkOp.jpg?1

问题是我不知道这个造型来自哪里，所以我决定检查“打破属性改变”＃39;在FireBug中，看看它说了什么。代码来自Jquery（jquery-2.1.3.min.js），如下图所示：http://i.imgur.com/Jbu8TCx.jpg?1

这就是我在<head>部分中的内容：

<link rel="stylesheet" href="http://localhost/sg-magento/skin/frontend/ultimo/default/css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="http://localhost/sg-magento/skin/frontend/ultimo/default/css/bootstrap/bootstrap-select.min.css">

<script type="text/javascript" src="http://localhost/sg-magento/js/infortis/jquery/jquery-2.1.3.min.js"></script>

<script type="text/javascript" src="http://localhost/sg-magento/skin/frontend/ultimo/default/js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="http://localhost/sg-magento/skin/frontend/ultimo/default/js/bootstrap/bootstrap-select.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($) {
   $('.selectpicker').selectpicker();
});
</script>

我从哪里开始？我该如何解决这个问题？看起来像这么小的东西，但它现在真的让我神经紧张。一直试图解决它很长一段时间。

希望有人愿意帮助。

感谢。

Answer 1

这是因为Bootstrap和Prototype冲突。查看更多详情here。创建一个新的JS文件并在其中添加以下代码。

if (Prototype.BrowserFeatures.ElementExtensions) {
var disablePrototypeJS = function (method, pluginsToDisable) {
        var handler = function (event) {
            event.target[method] = undefined;
            setTimeout(function () {
                delete event.target[method];
            }, 0);
        };
        pluginsToDisable.each(function (plugin) { 
            jQuery(window).on(method + '.bs.' + plugin, handler);
        });
    },
    pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip', 'popover'];
disablePrototypeJS('show', pluginsToDisable);
disablePrototypeJS('hide', pluginsToDisable);}

玩得开心：）

Answer 2

我有类似的问题，当select在提交和重新渲染Backbone模板时消失了。在我的情况下调用$（'。selectpicker'）。selectpicker（'render'）;固定它。

Answer 3

$( ".dropdown-menu > ul > li" ).click(function() {
$( '.bootstrap-select').attr('style', '');
$( this ).parent( '.bootstrap-select').attr('style', '');
});

这将覆盖导致此问题的任何冲突。我不相信以前的任何一个答案是正确的。和矿井DEF不是一个答案。但它会解决问题，直到可以花更多的时间来找到冲突的真正根源。原型可能是原因，但原型答案不起作用！

Bootstrap-select.js - 选择一个选项后，整个选择消失

3 个答案: