BootStrap点击下拉菜单项后显示一个新的输入框实现代码

时间：2021-05-28

我的页面上有一个下拉菜单,页面上有一个文本输入框,一个图像上传框,文本输入框默认是显示的,而图片上传框是隐藏的.

假设下拉菜单有两项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').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点击下拉菜单项后显示一个新的输入框实现代码，希望对大家有所帮助！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章