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 相关文章推荐
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
Node.js安装配置图文教程
May 10 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 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中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
php的ddos攻击解决方法
2015/01/08 PHP
php的debug相关函数用法示例
2016/07/11 PHP
laravel学习教程之关联模型
2016/07/30 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
javascript三元运算符用法实例
2015/04/16 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
mac下如何将python2.7改为python3
2018/07/13 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
学习Django知识点分享
2019/09/11 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
HTML5等待加载动画效果
2017/07/27 HTML / CSS
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
web字体加载方案优化小结
2019/11/29 HTML / CSS
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
全球性的在线商店:Vogca
2019/05/10 全球购物
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android