脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap 下拉菜单

BootStrap点击下拉菜单项后显示一个新的输入框实现代码

 更新时间：2016年05月16日 12:06:24   作者：ningyuwhut  
这篇文章主要介绍了BootStrap点击下拉菜单项后显示一个新的输入框实现代码的相关资料,需要的朋友可以参考下

我的页面上有一个下拉菜单,页面上有一个文本输入框,一个图像上传框,文本输入框默认是显示的,而图片上传框是隐藏的.

假设下拉菜单有两项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点击下拉菜单项后显示一个新的输入框实现代码，希望对大家有所帮助！

您可能感兴趣的文章:

相关文章

  • div+css布局的图片连续滚动js实现代码

    div+css布局的图片连续滚动js实现代码

    整理一个div+css图片连续滚动代码，原理跟脚本之家之前发布的文章一样。
    2010-05-05
  • JavaScript forEach的几种用法小结

    JavaScript forEach的几种用法小结

    forEach()是JavaScript中一个常用的方法,用于遍历数组或类数组对象中的每个元素,本文就来介绍一下JavaScript forEach的几种用法小结,具有一定的参考价值,感兴趣的可以了解一下
    2023-11-11
  • JavaScript Sort 表格排序

    JavaScript Sort 表格排序

    JavaScript表格排序实现代码，需要的朋友可以参考下。
    2009-10-10
  • 前端请求并发和请求覆盖的解决方法

    前端请求并发和请求覆盖的解决方法

    最近在开发一些大屏,涉及到比较多的数据来源,接口也没有做聚合,导致页面需要调很多接口来填充页面数据,那么就会有接口并发的问题出现,所以本文给大家介绍了如何解决前端请求并发和请求覆盖,需要的朋友可以参考下
    2024-10-10
  • JavaScript数组操作学习之splice()函数入门与精通

    JavaScript数组操作学习之splice()函数入门与精通

    这篇文章介绍了JavaScript数组操作中的splice()方法,详细讲解了其定义、语法和用法,并通过实例展示了如何使用该方法进行数组元素的添加、删除和替换,需要的朋友可以参考下
    2024-11-11
  • 详解 Map 和 WeakMap 区别以及使用场景

    详解 Map 和 WeakMap 区别以及使用场景

    这篇文章主要介绍了详解 Map 和 WeakMap 区别以及使用场景,Map本质上是一个键值对的集合,WeakMap 只能将对象作为键名,下面来一起俩姐更多详细内容吧，希望这一篇文章能让你对 Map 有更好的理解，或者能够帮你理解 Map 和 WeakMap
    2022-01-01
  • JavaScript算法实例之求二叉树从根到叶的所有路径和

    JavaScript算法实例之求二叉树从根到叶的所有路径和

    如果你希望求某一特定路径（例如从根到叶子）上数字的和,那么问题就转变为了“求二叉树从根到叶的所有路径和”,所以本文给大家介绍了如何使用JavaScript求二叉树从根到叶的所有路径和,需要的朋友可以参考下
    2023-10-10
  • js动态生成表格(节点操作)

    js动态生成表格(节点操作)

    这篇文章主要为大家详细介绍了js动态生成表格，进行节点操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-01-01
  • JS+CSS实现3D切割轮播图

    JS+CSS实现3D切割轮播图

    这篇文章主要为大家详细介绍了JS+CSS实现3D切割轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • javascript实现小型区块链功能

    javascript实现小型区块链功能

    这篇文章主要介绍了javascript实现小型区块链功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论