如何在BootStrap的下拉菜单项后加入一个新的输入框?
我的页面上有一个下拉菜单,页面上有一个文本输入框,一个图像上传框,文本输入框默认是显示的,而图片上传框是隐藏的.
假设下拉菜单有两项A和B,我想实现这样的效果:点击A时显示文本输入框,隐藏图像输入框;点击B时显示图像上传框,隐藏文本输入框,请问怎么实现?
用firebug调试的时候发现只有在加载html页面的时候几个click函数才会执行,页面加载好后点击下拉菜单项,这些断点都不会被执行,求解是怎么回事.
我的js代码如下(定义在<head>部分中):
<script type="text/javascript"> //image_upload是图片上传框的id,最开始时把它隐藏 $(document).ready( function(){ $("#image_upload").hide(); } ); //text_only是下拉菜单项,我想这个函数来实现点击这个菜单项时 //显示文本输入框text_input,隐藏图片上传框image_upload $('#text_only').click(function(e){ $("#text_input").show(); $("#image_upload").hide(); e.stopPropagation(); } ); /* image_only是下拉菜单项,点击它时隐藏文本框,显示图片上传框 */ $('image_only').click(function(){ $("#text_input").hide(); $("#image_upload").show(); }); </script>
完整的代码如下,怕上面的信息还不够:
<!DOCTYPE html> <html lang="en"> <head> <title> hello,world</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--防止中文乱码 --> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <link href="css/bootstrap-fileupload.css" rel="stylesheet" media="screen"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-fileupload.js"></script> <style> .center { width : auto; display : table; margin-top:150px; margin-left: auto; margin-right: auto; } .text-center { margin-top:30px; display:table; margin-left:auto; margin-right:auto; } body{ margin:0; background: url('img/955.jpg'); background-size: 1440px 800px; background-repeat: no-repeat; display: compact; background-color: transparent; } .btn-large{ padding: 14px 34px; } </style> <script type="text/javascript"> $(document).ready( function(){ $("#image_upload").hide(); } ); $('#text_only').click(function(e){ $("#text_input").show(); $("#image_upload").hide(); e.stopPropagation(); } ); $('image_only').click(function(){ $("#text_input").hide(); $("#image_upload").show(); }); $('supervised').click(function(){ $("#text_input").show(); $("#image_upload").show(); } ); </script> <script type="text/javascript"> </script> </head> <body> <h1>hello,world</h1> <div class="container"> <div class="navbar"> <div class="navbar-inner"> <ul class="nav"> <li class="active"> <a href="#">首页</a> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" > 单模态 <b class="caret"> </b> </a> <ul class="dropdown-menu" > <li><a id="text_only" href="#">文本 </a> </li> <li><a id="image_only" href="#">图像 </a> </li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 多模态 <b class="caret"> </b> </a> <ul class="dropdown-menu" > <li><a id="supervised" href="#">有监督 </a> </li> <li><a id="unsupervised" href="#">无监督 </a> </li> </ul> </li> </ul> </div> </div><!-- end of navbar --> <div class="center"> <form class="form-vertical"> <fieldset> <input id="text_input" type="text" class="input-xxlarge search-query" placeholder="Text input"> </br> <div id="image_upload" class="fileupload fileupload-new text-center" data-provides="fileupload"> <!-- <input type="hidden" value="" name=""> --> <div class="input-append"> <div class="uneditable-input span3"> <i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span> </div> <span class=" btn btn-file"> <span class="fileupload-new">Select file</span> <span class="fileupload-exists">Change</span> <input type="file" /> </span> <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a> </div> </div> <button type="submit" class="btn text-center btn-large btn-success"> Search </button> </br> </fieldset> </form> </div> </div> </body> </html>
BootStrap点击下拉菜单项后显示一个新的输入框实现代码,希望对大家有所帮助!
本文地址:http://www.45fan.com/bcdm/55870.html