這篇文章主要介紹了BootStrap點(diǎn)擊下拉菜單項(xiàng)后顯示一個(gè)新的輸入框?qū)崿F(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下
我的頁(yè)面上有一個(gè)下拉菜單,頁(yè)面上有一個(gè)文本輸入框,一個(gè)圖像上傳框,文本輸入框默認(rèn)是顯示的,而圖片上傳框是隱藏的.
假設(shè)下拉菜單有兩項(xiàng)A和B,我想實(shí)現(xiàn)這樣的效果:點(diǎn)擊A時(shí)顯示文本輸入框,隱藏圖像輸入框；點(diǎn)擊B時(shí)顯示圖像上傳框,隱藏文本輸入框,請(qǐng)問(wèn)怎么實(shí)現(xiàn)?
用firebug調(diào)試的時(shí)候發(fā)現(xiàn)只有在加載html頁(yè)面的時(shí)候幾個(gè)click函數(shù)才會(huì)執(zhí)行,頁(yè)面加載好后點(diǎn)擊下拉菜單項(xiàng),這些斷點(diǎn)都不會(huì)被執(zhí)行,求解是怎么回事.
我的js代碼如下(定義在<head>部分中):
<script type="text/javascript">
//image_upload是圖片上傳框的id,最開(kāi)始時(shí)把它隱藏
$(document).ready( function(){
$("#image_upload").hide();
}
);
//text_only是下拉菜單項(xiàng),我想這個(gè)函數(shù)來(lái)實(shí)現(xiàn)點(diǎn)擊這個(gè)菜單項(xiàng)時(shí)
//顯示文本輸入框text_input,隱藏圖片上傳框image_upload
$('#text_only').click(function(e){
$("#text_input").show();
$("#image_upload").hide();
e.stopPropagation();
}
);
/*
image_only是下拉菜單項(xiàng),點(diǎn)擊它時(shí)隱藏文本框,顯示圖片上傳框
*/
$('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>
<div>
<div>
<ul>
<li>
<a href="#">首頁(yè)</a>
</li>
<li>
<a data-toggle="dropdown" href="#" >
單模態(tài) <b> </b>
</a>
<ul >
<li><a id="text_only" href="#">文本 </a> </li>
<li><a id="image_only" href="#">圖像 </a> </li>
</ul>
</li>
<li>
<a data-toggle="dropdown" href="#">
多模態(tài) <b> </b>
</a>
<ul >
<li><a id="supervised" href="#">有監(jiān)督 </a> </li>
<li><a id="unsupervised" href="#">無(wú)監(jiān)督 </a> </li>
</ul>
</li>
</ul>
</div>
</div><!-- end of navbar -->
<div>
<form>
<fieldset>
<input id="text_input" type="text" placeholder="Text input">
</br>
<div id="image_upload" data-provides="fileupload">
<!-- <input type="hidden" value="" name=""> -->
<div>
<div>
<i></i>
<span></span>
</div>
<span>
<span>Select file</span>
<span>Change</span>
<input type="file" />
</span>
<a href="#" data-dismiss="fileupload">Remove</a>
</div>
</div>
<button type="submit"> Search </button>
</br>
</fieldset>
</form>
</div>
</div>
</body>
</html>
BootStrap點(diǎn)擊下拉菜單項(xiàng)后顯示一個(gè)新的輸入框?qū)崿F(xiàn)代碼，希望對(duì)大家有所幫助！