BootStrap点击下拉菜单项后显示一个新的输入框实现代码
我的页面上有一个下拉菜单,页面上有一个文本输入框,一个图像上传框,文本输入框默认是显示的,而图片上传框是隐藏的.
假设下拉菜单有两项A和B,我想实现这样的效果:点击A时显示文本输入框,隐藏图像输入框；点击B时显示图像上传框,隐藏文本输入框,请问怎么实现?
用firebug调试的时候发现只有在加载html页面的时候几个click函数才会执行,页面加载好后点击下拉菜单项,这些断点都不会被执行,求解是怎么回事.
我的js代码如下(定义在<head>部分中):
<scripttype="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>
完整的代码如下,怕上面的信息还不够:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<title>hello,world</title>
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<!--防止中文乱码-->
<linkhref="css/bootstrap.css"rel="stylesheet"media="screen">
<linkhref="css/bootstrap-fileupload.css"rel="stylesheet"media="screen">
<scriptsrc="http://code.jquery.com/jquery.js"></script>
<scriptsrc="js/bootstrap.min.js"></script>
<scriptsrc="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:1440px800px;
background-repeat:no-repeat;
display:compact;
background-color:transparent;
}
.btn-large{
padding:14px34px;
}
</style>
<scripttype="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>
<scripttype="text/javascript">
</script>
</head>
<body>
<h1>hello,world</h1>
<divclass="container">
<divclass="navbar">
<divclass="navbar-inner">
<ulclass="nav">
<liclass="active">
<ahref="#">首页</a>
</li>
<liclass="dropdown">
<aclass="dropdown-toggle"data-toggle="dropdown"href="#">
单模态<bclass="caret"></b>
</a>
<ulclass="dropdown-menu">
<li><aid="text_only"href="#">文本</a></li>
<li><aid="image_only"href="#">图像</a></li>
</ul>
</li>
<liclass="dropdown">
<aclass="dropdown-toggle"data-toggle="dropdown"href="#">
多模态<bclass="caret"></b>
</a>
<ulclass="dropdown-menu">
<li><aid="supervised"href="#">有监督</a></li>
<li><aid="unsupervised"href="#">无监督</a></li>
</ul>
</li>
</ul>
</div>
</div><!--endofnavbar-->
<divclass="center">
<formclass="form-vertical">
<fieldset>
<inputid="text_input"type="text"class="input-xxlargesearch-query"placeholder="Textinput">
</br>
<divid="image_upload"class="fileuploadfileupload-newtext-center"data-provides="fileupload">
<!--<inputtype="hidden"value=""name="">-->
<divclass="input-append">
<divclass="uneditable-inputspan3">
<iclass="icon-filefileupload-exists"></i>
<spanclass="fileupload-preview"></span>
</div>
<spanclass="btnbtn-file">
<spanclass="fileupload-new">Selectfile</span>
<spanclass="fileupload-exists">Change</span>
<inputtype="file"/>
</span>
<ahref="#"class="btnfileupload-exists"data-dismiss="fileupload">Remove</a>
</div>
</div>
<buttontype="submit"class="btntext-centerbtn-largebtn-success">Search</button>
</br>
</fieldset>
</form>
</div>
</div>
</body>
</html>
BootStrap点击下拉菜单项后显示一个新的输入框实现代码，希望对大家有所帮助！