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

前端技术 2023/09/05 JavaScript

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

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

本文地址：https://www.stayed.cn/item/13807

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案