[英]Expanding and collapsing multiple DIV elements depending on selected
I need some help with JavaScript. 我需要JavaScript的帮助。 This needs to be changed.
这需要更改。
My HTML has a dropddown list with a default selection of "choose one" 我的HTML有一个下拉列表,默认选择为“选择一个”。
I have 4 div
in my html id new / previous / existing and existinginfo 我的html id new / previous /
div
中有4 div
the page starts with all div
's closed but I would like to alter the code to amend them to show depending on what drop down list is picked. 该页面以所有
div
的关闭开头,但是我想更改代码以修改它们以根据选择的下拉列表进行显示。
If the selection drop down list is New user
only "NEW" div
is shown others are closed. 如果选择下拉列表为“
New user
”,则仅显示“ NEW” div
,其他用户则关闭。
Previous user
- NEW and PREVIOUS div
's are shown others are closed. Previous user
-显示NEW和PREVIOUS div
的其他用户已关闭。
existing user
existing div
is shown and existinginfo div
is shown (new and previous are closed). existing user
现存div
会显示,而现存的div
会显示(新的和上一个已关闭)。
I believe i need to have a additional functions which are copies of my slideuprunnew/slidedownRunnew functions with the addtional names (ie slideuprunPrev and SlideDownRunPrev) but I am having a lot of problems working out how to do the Slide()
function and correctly nesting all the if. 我相信我需要一个附加功能,这些功能是我的slideuprunnew / slidedownRunnew函数的副本,带有附加名称(即slideuprunPrev和SlideDownRunPrev),但是在解决如何执行
Slide()
函数并正确嵌套所有嵌套函数方面存在很多问题如果。
<script type="text/javascript">
var sliderIntervalId = 0;
var sliderHeight = 1;
var sliding = false;
var slideSpeed = 5;
function Slide() {
var selected = document.getElementById('selection');
if (sliding)
return;
sliding = true;
if (sliderHeight == 150 && selected.value != "new user")
sliderIntervalId = setInterval('SlideUpRunNEW()', 30);
else {
if (selected.value == "new user")
sliderIntervalId = setInterval('SlideDownRunNEW()', 30);
else {
sliding = false;
return;
}
}
}
function SlideUpRunNEW() {
slider = document.getElementById('new');
if (sliderHeight <= 1) {
sliding = false;
sliderHeight = 1;
slider.style.height = '1px';
clearInterval(sliderIntervalId);
}
else {
sliderHeight -= slideSpeed;
if (sliderHeight < 1)
sliderHeight = 1;
slider.style.height = sliderHeight + 'px';
}
}
function SlideDownRunNEW() {
slider = document.getElementById('new');
if (sliderHeight >= 150) {
sliding = false;
sliderHeight = 150;
slider.style.height = '150px';
clearInterval(sliderIntervalId);
}
else {
sliderHeight += slideSpeed;
if (sliderHeight > 150)
sliderHeight = 150;
slider.style.height = sliderHeight + 'px';
}
}
</script>
have a look here: http://jsfiddle.net/uZcTH/ 在这里看看: http : //jsfiddle.net/uZcTH/
I used JQuery, if you need only pure javascript, then these are not the droids you are looking for. 我使用了JQuery,如果您只需要纯JavaScript,那么这些不是您要查找的droid。
JS JS
$("#newUser").show();
$("#previousUser").hide();
$("#existingUser").hide();
$("#userPicker").change(function () {
var val = $(this).val();
switch (val) {
case "1":
$("#newUser").show();
$("#previousUser").hide();
$("#existingUser").hide();
break;
case "2":
$("#newUser").hide();
$("#previousUser").show();
$("#existingUser").hide();
break;
case "3":
$("#newUser").hide();
$("#previousUser").hide();
$("#existingUser").show();
break;
}
});
HTML 的HTML
<select id="userPicker">
<option value="1">New User</option>
<option value="2">Previous User</option>
<option value="3">Existing User</option>
</select>
<div id="newUser">new user</div>
<div id="previousUser">previous user</div>
<div id="existingUser">existing user</div>
hope it helps, regards 希望能有所帮助,问候
EDIT 编辑
pure js version here: http://jsfiddle.net/uZcTH/2/ 此处为纯js版本: http : //jsfiddle.net/uZcTH/2/
CODE 码
document.getElementById("newUser").style.display = "none";
document.getElementById("previousUser").style.display = "none";
document.getElementById("existingUser").style.display = "none";
document.getElementById("userPicker").onchange = function () {
switch (this.selectedIndex) {
case 0:
document.getElementById("newUser").style.display = "block";
document.getElementById("previousUser").style.display = "none";
document.getElementById("existingUser").style.display = "none";
break;
case 1:
document.getElementById("newUser").style.display = "none";
document.getElementById("previousUser").style.display = "block";
document.getElementById("existingUser").style.display = "none";
break;
case 2:
document.getElementById("newUser").style.display = "none";
document.getElementById("previousUser").style.display = "none";
document.getElementById("existingUser").style.display = "block";
break;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.