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 相关文章推荐
两个数组去重的JS代码
Dec 04 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
js图片轮播插件的封装
Jul 21 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
在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中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
新手入门js闭包学习过程解析
2019/10/08 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
python中pycurl库的用法实例
2014/09/30 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
Python实现多线程的两种方式分析
2018/08/29 Python
pandas中ix的使用详细讲解
2020/03/09 Python
python pymysql库的常用操作
2020/10/16 Python
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
《小石潭记》教学反思
2014/02/13 职场文书
社区工作感言
2014/02/21 职场文书
金融管理专业求职信
2014/07/10 职场文书
爱的教育读书笔记
2015/06/26 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书