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 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 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 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
javascript实现导航栏分页效果
2019/06/27 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
python使用socket远程连接错误处理方法
2015/04/29 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
nohup的用法
2014/08/10 面试题
个人贷款担保书
2014/04/01 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
班委竞选演讲稿
2014/04/28 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
医者仁心观后感
2015/06/17 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
如何用python绘制雷达图
2021/04/24 Python