引导drodown不工作
问题描述:
我更新来引导3.2.0后,我所有的下拉按钮采空工作,而最古怪的部分是,如果我申报文件的两倍,如:引导drodown不工作
<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
线两次,下拉菜单的工作......这真是让我烦恼。
答
完成!我所要做的只是在我的javascript中添加$('.dropdown-toggle').dropdown()
,它工作了
答
这是你更新的提琴:http://jsfiddle.net/01hf1obo/3/
问题:你还没有添加的jQuery框架上bootstrap.min.js的顶部,这就是为什么引导的JS不工作,你显示错误。我已经添加了它。现在你的引导下拉菜单工作正常。你可以检查它。
$(document).ready(function() {
$('#prod_preco').maskMoney({
symbol: "",
decimal: ",",
thousands: ""
});
$('.datepicker').datepicker({
format: 'dd/mm/yyyy',
});
});
body {
padding-top: 60px;
padding-bottom: 40px;
}
<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>
maskMoney不是自举的函数。它是任何外部js的功能,因此您还需要将该js的引用添加到您的html
您在开发者控制台中遇到什么错误? – Gohn67 2014-10-17 23:47:20
尝试添加未缩小的版本。这使得发现错误变得更容易。 – Fred 2014-10-17 23:52:11
发布完整的实时代码示例,例如JS小提琴。 – cvrebert 2014-10-18 00:23:53