Bootstrap 下拉按钮不起作用

Question

我有一个表单，它使用输入组中的下拉按钮作为聚合物自定义 html 标记放置在页面中。它在 fiddle, but not in my live demo.

中运行良好

来自 index.html:

<video class="background" autoplay loop poster="/static/video/video.jpg">
    <source src="/static/video/video.webm" type="video/webm">
    <source src="/static/video/video.mp4" type="video/mp4">
    <source src="/static/video/video.ogv" type="video/ogv">
</video>
<div class="index-cta">
    <div class="row-">
        <div class="col-md-4">
            <!-- TMPL_VAR instance_name -->
        </div>
        <div class="col-md-8">
            <h1>Real Estate</h1>
            <p>
                <em>you're one click away from thousands of homes</em><br>
                <a class="btn btn-link btn-outline btn-inverse" href="/leads/buy"><span>Buying a home?</span></a>
                <a class="btn btn-link btn-outline btn-inverse" href="/leads/sell"><span>Selling a home?</span></a>
                <a class="btn btn-link btn-outline btn-inverse" href="/leads/cma"><span>What's my home worth?</span></a>
            </p>
            <search-form></search-form>
        </div>
    </div>
</div>

来自搜索-form.html

<!-- Defines element markup -->
<dom-module id="search-form">
<template>
    <form id="search" method="get" action="/property/search">
    <div class="input-group">
        <div class="input-group-btn">
            <button id="#search-type" type="button" class="btn primary dropdown-toggle" data-toggle="dropdown">
                Search By 
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a data-name="city" data-label="city">City</a></li>
                <li><a data-name="zip" data-label="zip">Zip Code</a></li>
                <li><a data-name="mls" data-label="mls">MLS Number</a></li>
            </ul>
        </div>
        <input id="#input-tag" class="form-control" type="text" name="" value="">
        <div class="input-group-btn">
            <button type="submit" class="btn"><i class="fa fa-search"></i></button>
        </div>
    </div>
    </form>
</template>

<script>
/********************************
/ SEARCH TYPE BUTTON
/*******************************/
$(function () {
    var caret = ' <span class="caret"></span>';

    function searchSelect() {
        $('.dropdown-menu > li > a').on("click", function() {
            $('#search-type').html($(this).text() + caret);
            $('#input-tag').attr('placeholder', $(this).data('label'));
            $('#input-tag').attr('name', $(this).data('name'));
        });
    }searchSelect();
}); 

Polymer({
        is: 'search-form',
        created: function() {},
        ready: function() {},
        attached: function() {},
        detached: function() {},
        attributeChanged: function(name, type) {}
}); 
</script>
</dom-module>

css 涉及元素：

.background { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(/static/video/video.jpg) no-repeat;
    background-size: cover; 
}

.index-cta {
    background-color: rgba(255,255,255,.5);
    display: block;
    position: absolute;
    padding: 20px;
    overflow: visible;
    width: 100%;
}

jquery:

$(document).ready(function() {
    $('.index-cta').css("top", (($(window).height() - $('.index-cta').height()) / 4) - $('footer').height()  + "px");
    $('.index-cta').css("left", ( $(window).width() - $('.index-cta').width()) /   + "px");
});

我完全搞砸了这个，因为我能够创建一个工作演示，但是当放在网站的其余部分时，如果失败。

Answer 1

尝试将 jQuery 和 Bootstrap 脚本移动到 webcomponents.min.js 之前。

参见webcomponents.js 问题 #130，here

Answer 2

您的下拉菜单正在运行。问题是某些 CSS 样式覆盖了 bootstrap 下拉列表的默认 css 样式由于您使用的是 LESS ，我无法找到该文件。所以只提供要删除的样式的屏幕截图。

Bootstrap 下拉按钮不起作用

Bootstrap dropdown button not working

css

jquery

web-component

twitter-bootstrap

polymer