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


Posted in Javascript onMay 16, 2016

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

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

Javascript 相关文章推荐
学习ExtJS Window常用方法
Oct 07 Javascript
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
juqery 学习之五 文档处理 插入
Feb 11 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
prototype.js常用函数详解
Jun 18 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
Vue.js中的组件系统
May 30 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
在javascript中创建对象的各种模式解析
May 16 #Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 #Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 #Javascript
Javascript基础教程之比较null和undefined值
May 16 #Javascript
javascript对象的相关操作小结
May 16 #Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 #Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 #Javascript
You might like
php判断变量类型常用方法
2012/04/24 PHP
PHP 透明水印生成代码
2012/08/27 PHP
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
python实现从字典中删除元素的方法
2015/05/04 Python
深入理解Python中字典的键的使用
2015/08/19 Python
Python字符串格式化输出方法分析
2016/04/13 Python
python验证码识别的示例代码
2017/09/21 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
教师实习期自我鉴定
2013/10/06 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
离婚上诉状范文
2015/05/23 职场文书
车间安全生产管理制度
2015/08/06 职场文书
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android
解析python中的jsonpath 提取器
2022/01/18 Python
解析MySQL索引的作用
2022/03/03 MySQL
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android