在我更新到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 ® @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
行放两次,那么下拉列表就会起作用......那真是让我烦恼的是什么。
答案 0 :(得分:0)
这是您更新的小提琴:http://jsfiddle.net/01hf1obo/3/
问题:你没有在bootstrap.min.js的顶部添加jquery框架,这就是为什么bootstrap的js不工作并向你显示该错误。我添加了它。现在你的bootstrap下拉工作正常。你可以查一下。
$(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>: Bar da Galera
<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>: (32)13213-2131
<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>: 11.111.111/1111-11
<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>: Rua 1, Bairro 1
<label for="adm_estabelecimento_Endereco_numero">Nº<span class="required" style="visibility:hidden;">*</span>
</label> 312312 - Cidade 1
<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">×</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">×</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">×</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 '18'." 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 '18'." 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">×</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">×</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 ® 2014</p>
</footer>
</div>
</body>
&#13;
maskMoney不是bootstrap的功能。它是任何外部js的函数,所以你还需要将js的引用添加到你的html
答案 1 :(得分:-1)
完成!我所要做的就是在我的javascript中添加$('.dropdown-toggle').dropdown()
并且它有效