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 相关文章推荐
Javascript this关键字使用分析
Oct 21 Javascript
Javascript 中文字符串处理额外注意事项
Nov 15 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 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
终于听上了直流胆调频
2021/03/02 无线电
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
js模态对话框使用方法详解
2017/02/16 Javascript
angular动态表单制作
2018/02/23 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
理论讲解python多进程并发编程
2018/02/09 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
安卓程序员求职信
2014/02/28 职场文书
施工员岗位职责
2014/03/16 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
放飞理想演讲稿
2014/09/09 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
法律讲堂观后感
2015/06/11 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
教师培训简讯
2015/07/20 职场文书
MySQL 四种连接和多表查询详解
2021/07/16 MySQL
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python