Bootstrap下拉列表无法正常工作

时间:2014-10-17 23:37:41

标签: javascript jquery twitter-bootstrap-3

在我更新到Bootstrap 3.2.0之后,所有我的下拉按钮停止工作,而最奇怪的部分是,如果我声明文件两次,如:

<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

它有效,但随后我的模态被破坏了。我尝试回到3.0.0,但问题现在仍然存在。 帮助


JSFiddle:http://jsfiddle.net/01hf1obo/

关于控制台,这就是它所显示的内容:

GET http://localhost:3121/Content/css-responsive  1:16
Uncaught ReferenceError: $ is not defined 1:74
GET http://localhost:3121/js-culture.pt-BR  1:88
Resource interpreted as Image but transferred with MIME type text/html: "http://localhost:3121/Administrador/altEst/1". 1:61
Uncaught TypeError: undefined is not a function

@using System.Web.Optimization
@using BootstrapSupport
@using NavigationRoutes
@using pedidosOnlineMVC.Helpers

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>@ViewBag.Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        @Html.MetaAcceptLanguage()
        <link href="@Styles.Url("~/content/css")" rel="stylesheet"/>
        <style type="text/css">
          body {
            padding-top: 60px;
            padding-bottom: 40px;
          }
        </style>
    <link href="@Styles.Url("~/Content/css-responsive")" rel="stylesheet" type="text/css" />
        @RenderSection("head", required: false)
        @*@Html.Partial("_html5shiv")*@
        @* favicons and touch icons go here *@
            <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/modernizr-2.8.3.js"></script>
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a class="brand navbar-brand" href="~/Login">Sistema de pedidos</a>
                    <div class="nav-collapse">
                        <ul class="nav">
                            @Html.Navigation()
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>
        <div class="container">
            @Html.Partial("_alerts")
            @RenderBody()   
            <hr>
            <footer>
                <p>Codifica &reg; @System.DateTime.Now.ToString("yyyy")</p>
            </footer> 
        </div>
         @Scripts.Render(
             "~/js", 
             Html.JsCultureBundle()
         )
         @RenderSection("Scripts", required: false)
        <script src="~/Scripts/jquery-2.1.1.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="~/Scripts/jasny-bootstrap.min.js"></script>
        <script src="~/Scripts/bootstrap.typeahead.js"></script>
        <script src="~/Scripts/bootstrap-datepicker.js"></script>
        <script src="~/Scripts/jquery.maskMoney.min.js"></script>
        <script src="~/Scripts/TwitterBootstrapMvcJs.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#prod_preco').maskMoney({ symbol: "", decimal: ",", thousands: "" });
                $('.datepicker').datepicker({
                    format: 'dd/mm/yyyy',
                    language: 'pt-BR'
                });
            });
        </script>
    </body>
</html>

请注意,如果我将bootstrap.min.js行放两次,那么下拉列表就会起作用......那真是让我烦恼的是什么。

2 个答案:

答案 0 :(得分:0)

这是您更新的小提琴:http://jsfiddle.net/01hf1obo/3/

问题:你没有在bootstrap.min.js的顶部添加jquery框架,这就是为什么bootstrap的js不工作并向你显示该错误。我添加了它。现在你的bootstrap下拉工作正常。你可以查一下。

&#13;
&#13;
$(document).ready(function () {
    $('#prod_preco').maskMoney({
        symbol: "",
        decimal: ",",
        thousands: ""
    });
    $('.datepicker').datepicker({
        format: 'dd/mm/yyyy',
    });
});
&#13;
body {
    padding-top: 60px;
    padding-bottom: 40px;
}
&#13;
<title>Title</title>
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
 <a class="brand navbar-brand" href="~/Login">Sistema de pedidos</a>

                <div class="nav-collapse"></div>
                <!--/.nav-collapse -->
            </div>
        </div>
    </div>
    <div class="container">
        <div class="panel-default panel">
            <div class="panel-heading"> <span style="font-size:medium">Administrador: Administradô</span>

                <br /> <span style="font-size:large">Estabelecidimento: Bar da Galera</span>

            </div>
            <div class="panel-heading">
                <div class="btn-group"><a class="btn  btn-default" href="/Administrador/Index/1">Início</a>

                    <div class="btn-group"><a class="btn dropdown-toggle btn-default " data-toggle="dropdown" href="#">Produtos <span class="caret"></span></a>

                        <ul class="dropdown-menu">
                            <li><a href="/Administrador/verProdutos/1">Listar produtos</a>

                            </li>
                            <li><a href="/Administrador/addProduto/1">Adicionar produto</a>

                            </li>
                            <li><a href="/Administrador/buscarProduto/1">Buscar produto</a>

                            </li>
                        </ul>
                    </div>
                    <div class="btn-group"><a class="btn dropdown-toggle btn-default " data-toggle="dropdown" href="#">Estabelecimento <span class="caret"></span></a>

                        <ul class="dropdown-menu">
                            <li><a href="/Administrador/autCli/1">Autorizar clientes</a>

                            </li>
                            <li><a href="/Administrador/altEst/1">Alterar cadastro do estabelecimento</a>

                            </li>
                            <li><a href="/Administrador/pedidos/1">Visualizar pedidos</a>

                            </li>
                        </ul>
                    </div><a class="btn  btn-default" href="/Administrador/altCad/1">Alterar cadastro <i class="icon-cog"></i></a>

                </div>
            </div>
            <div class="panel-body">
                <br />
                <br />
                <label for="adm_estabelecimento_nome">Nome<span class="required" style="visibility:hidden;">*</span> 
                </label>:&nbsp;Bar da Galera&nbsp;&nbsp;
                <button class="btn-default  btn" data-target="#ModalNome" data-toggle="modal" type="button">Editar</button>
                <br />
                <label for="adm_estabelecimento_telefone">Telefone<span class="required" style="visibility:hidden;">*</span> 
                </label>:&nbsp;(32)13213-2131&nbsp;&nbsp;
                <button class="btn-default  btn" data-target="#ModalTel" data-toggle="modal" type="button">Editar</button>
                <br />
                <label for="adm_estabelecimento_CNPJ">C N P J<span class="required" style="visibility:hidden;">*</span> 
                </label>:&nbsp;11.111.111/1111-11&nbsp;&nbsp;
                <button class="btn-default  btn" data-target="#ModalCNPJ" data-toggle="modal" type="button">Editar</button>
                <br />
                <label for="adm_estabelecimento_Endereco">Endereço<span class="required" style="visibility:hidden;">*</span> 
                </label>:&nbsp;Rua 1, Bairro 1&nbsp;
                <label for="adm_estabelecimento_Endereco_numero">Nº<span class="required" style="visibility:hidden;">*</span> 
                </label>&nbsp;312312 - Cidade 1 &nbsp;&nbsp;
                <button class="btn-default  btn" data-target="#ModalEnd" data-toggle="modal" type="button">Editar</button>
                <br />
                <label for="adm_estabelecimento_Imagem">Foto<span class="required" style="visibility:hidden;">*</span> 
                </label>:
                <br />
                <div>
                    <img src="#" />
                </div>
                <br />
                <button class="btn-default  btn" data-target="#ModalFoto" data-toggle="modal" type="button">Editar</button>
                <div class="modal fade" data-backdrop="false" id="ModalNome" tabindex="-1">
                    <div class="modal-dialog ">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                 <h4 class="modal-title">Digite o novo nome:</h4>

                            </div>
                            <form action="/Administrador/altEst/1" method="post">
                                <div class="modal-body">
                                    <div class=" form-group">
                                        <input name="__RequestVerificationToken" type="hidden" value="NBOOkrW3V41tYcHE225CcXpvASwluITjv6Z1DwBYBAnrtXpeV9nyx5ddZGp0R4xfBV3fc2VRvy-qhm3WAhmcCZSI0EVPPA5DdXtu2vFkzmg1" />
                                    </div>
                                    <div class=" form-group">
                                        <input data-val="true" data-val-number="The field Estabelecimento_Id must be a number." data-val-required="O campo Estabelecimento_Id é obrigatório." id="adm_estabelecimento_Estabelecimento_Id" name="adm.estabelecimento.Estabelecimento_Id" type="hidden" value="1" />
                                    </div>
                                    <div class=" form-group">
                                        <label class="control-label" for="adm_estabelecimento_nome">Nome<span class="required">*</span> 
                                        </label>
                                        <input class="form-control" data-val="true" data-val-required="O campo Nome é obrigatório." id="adm_estabelecimento_nome" name="adm.estabelecimento.nome" type="text" value="Bar da Galera" /><span class="field-validation-valid" data-valmsg-for="adm.estabelecimento.nome" data-valmsg-replace="true"></span>

                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <div class=" form-group">
                                        <button class="btn-default  btn" type="submit">Salvar</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal fade" data-backdrop="false" id="ModalTel" tabindex="-1">
                    <div class="modal-dialog ">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                 <h4 class="modal-title">Digite o novo telefone:</h4>

                            </div>
                            <form action="/Administrador/altEst/1" method="post">
                                <div class="modal-body">
                                    <div class=" form-group">
                                        <input name="__RequestVerificationToken" type="hidden" value="gBl_YOCBjziWl_fk8D22ZwlGvy6q-zClnbAQ8Vrp_k3zN3PhuqC4X31AdgL3MiCmkTd_FCnoWDUY9U221c4Cbdrlg5IvgAwUxSaNq-TQm5k1" />
                                    </div>
                                    <div class=" form-group">
                                        <input data-val="true" data-val-number="The field Estabelecimento_Id must be a number." data-val-required="O campo Estabelecimento_Id é obrigatório." id="adm_estabelecimento_Estabelecimento_Id" name="adm.estabelecimento.Estabelecimento_Id" type="hidden" value="1" />
                                    </div>
                                    <div class=" form-group">
                                        <label class="control-label" for="adm_telefone">Telefone<span class="required">*</span> 
                                        </label>
                                        <input class="form-control" data-mask="(99)99999-9999" data-val="true" data-val-required="O campo Telefone é obrigatório." id="adm_telefone" name="adm.telefone" type="text" value="(32)13213-2131" /><span class="field-validation-valid" data-valmsg-for="adm.telefone" data-valmsg-replace="true"></span>

                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <div class=" form-group">
                                        <button class="btn-default  btn" type="submit">Salvar</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal fade" data-backdrop="false" id="ModalCNPJ" tabindex="-1">
                    <div class="modal-dialog ">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                 <h4 class="modal-title">Digite o novo CNPJ:</h4>

                            </div>
                            <form action="/Administrador/altEst/1" method="post">
                                <div class="modal-body">
                                    <div class=" form-group">
                                        <input name="__RequestVerificationToken" type="hidden" value="tmVfA5rZHVJuBDOmsg1HqfxsczlU_EQVdwbqiAVSHcdjXI0xIKDKh-lU0xF6lHSBlj9eWkOctksiJRXFljgvfv_wII0Kf6pBVU72InD3UC01" />
                                    </div>
                                    <div class=" form-group">
                                        <input data-val="true" data-val-number="The field Estabelecimento_Id must be a number." data-val-required="O campo Estabelecimento_Id é obrigatório." id="adm_estabelecimento_Estabelecimento_Id" name="adm.estabelecimento.Estabelecimento_Id" type="hidden" value="1" />
                                    </div>
                                    <div class=" form-group">
                                        <label class="control-label" for="adm_estabelecimento_CNPJ">C N P J<span class="required">*</span> 
                                        </label>
                                        <input class="form-control" data-mask="99.999.999/9999-99" data-val="true" data-val-maxlength="O campo CNPJ deve ser uma cadeia de caracteres ou tipo de matriz com comprimento máximo de &#39;18&#39;." data-val-maxlength-max="18" data-val-minlength="O campo CNPJ deve ser uma cadeia de caracteres ou tipo de matriz com comprimento mínimo de &#39;18&#39;." data-val-minlength-min="18" data-val-required="O campo CNPJ é obrigatório." id="adm_estabelecimento_CNPJ" name="adm.estabelecimento.CNPJ" type="text" value="11.111.111/1111-11" /><span class="field-validation-valid" data-valmsg-for="adm.estabelecimento.CNPJ" data-valmsg-replace="true"></span>

                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <div class=" form-group">
                                        <button class="btn-default  btn" type="submit">Salvar</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal fade" data-backdrop="false" id="ModalFoto" tabindex="-1">
                    <div class="modal-dialog ">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                 <h4 class="modal-title">Selecione a nova foto</h4>

                            </div>
                            <form action="/Administrador/altEst/1" enctype="multipart/form-data" method="post">
                                <div class="modal-body">
                                    <div class=" form-group">
                                        <input name="__RequestVerificationToken" type="hidden" value="7dljHIPBM2KzAkonDE9QyHO26bd1Ig0c-cVZIRFlA3b811-hVlRD9AHHR-H1qRlA5qb7lVA6vztym6prDL9GG07aajPh39D2LThZPdRxFjc1" />
                                    </div>
                                    <div class=" form-group">
                                        <input data-val="true" data-val-number="The field Estabelecimento_Id must be a number." data-val-required="O campo Estabelecimento_Id é obrigatório." id="adm_estabelecimento_Estabelecimento_Id" name="adm.estabelecimento.Estabelecimento_Id" type="hidden" value="1" />
                                    </div>
                                    <img src="#" id="imgpre" />
                                    <div class=" form-group">
                                        <label class="control-label" for="img">Imagem<span class="required" style="visibility:hidden;">*</span> 
                                        </label>
                                        <input id="img" name="img" type="File" value="" /><span class="help-block">Sua imagem será redimensionada para 300x300</span><span class="field-validation-valid" data-valmsg-for="img" data-valmsg-replace="true"></span>

                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <div class=" form-group">
                                        <button class="btn-default  btn" type="submit">Salvar</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal fade" data-backdrop="false" id="ModalEnd" tabindex="-1">
                    <div class="modal-dialog ">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                 <h4 class="modal-title">Digitie a nova senha:</h4>

                            </div>
                            <form action="/Administrador/altEst/1" method="post">
                                <div class="modal-body">
                                    <div class=" form-group">
                                        <input name="__RequestVerificationToken" type="hidden" value="xcW4SLur-iEK3Pp-a1LDGPOktEmJ7w8c9WPJw_6HphJX0rJ1H9VgnrzHjEHmEU1_JZcVdaQs3bjUQvUfgzTTJ5l0-poDIuF-K_ha8WXEMvg1" />
                                    </div>
                                    <div class=" form-group">
                                        <input data-val="true" data-val-number="The field Estabelecimento_Id must be a number." data-val-required="O campo Estabelecimento_Id é obrigatório." id="adm_estabelecimento_Estabelecimento_Id" name="adm.estabelecimento.Estabelecimento_Id" type="hidden" value="1" />
                                    </div>
                                    <div class=" form-group">
                                        <label class="control-label" for="adm_senha">Senha<span class="required">*</span> 
                                        </label>
                                        <input class="form-control" data-val="true" data-val-required="O campo Senha é obrigatório." id="adm_senha" name="adm.senha" type="text" value="" /><span class="field-validation-valid" data-valmsg-for="adm.senha" data-valmsg-replace="true"></span>

                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <div class=" form-group">
                                        <button class="btn-default  btn" type="submit">Salvar</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            <footer>
                <p>Codifica &reg; 2014</p>
            </footer>
        </div>
</body>
&#13;
&#13;
&#13;

maskMoney不是bootstrap的功能。它是任何外部js的函数,所以你还需要将js的引用添加到你的html

答案 1 :(得分:-1)

完成!我所要做的就是在我的javascript中添加$('.dropdown-toggle').dropdown()并且它有效