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 验证密码强弱的小例子
Mar 21 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
JavaScript反射与依赖注入实例详解
May 29 Javascript
个人小程序接入支付解决方案
May 23 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 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实现采集程序原理和简单示例代码
2007/03/18 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
angular2使用简单介绍
2016/03/01 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
Python字典遍历操作实例小结
2019/03/05 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
python 6种方法实现单例模式
2020/12/15 Python
英国最大的海报商店:GB Posters
2018/03/20 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
银行实习人员自我鉴定
2013/09/22 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
食品安全责任书
2014/04/15 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
合同纠纷调解书
2015/05/20 职场文书
酒会开场白大全
2015/06/01 职场文书
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python