Question

我有一个表单，使用输入组中的下拉按钮作为聚合物自定义html标记放置在页面中。它在fiddle中工作正常，但在我的live demo中没有。

来自index.html的

：

http://localhost

来自search-form.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>

css涉及的元素：

<!-- 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>

jquery的：

.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%;
}

由于我能够创建一个有效的演示程序，我完全被这个破坏了，但是当放入网站的其他部分时，如果失败了。

Answer 1

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

Answer 2

尝试移动jQuery＆amp; webcomponents.min.js之前的引导脚本。

请参阅 webcomponents.js问题＃130 ，here

Bootstrap下拉按钮不起作用

2 个答案: