根据所选内容扩展和折叠多个DIV元素

Question

我需要JavaScript的帮助。 这需要更改。

我的HTML有一个下拉列表，默认选择为“选择一个”。

• 新用户
• 以前的用户
• 现有用户

我的html id new / previous / div中有4 div

该页面以所有div的关闭开头，但是我想更改代码以修改它们以根据选择的下拉列表进行显示。

如果选择下拉列表为“ New user ”，则仅显示“ NEW” div ，其他用户则关闭。

Previous user -显示NEW和PREVIOUS div的其他用户已关闭。

existing user现存div会显示，而现存的div会显示（新的和上一个已关闭）。

我相信我需要一个附加功能，这些功能是我的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>

Answer 1

在这里看看： http : //jsfiddle.net/uZcTH/

我使用了JQuery，如果您只需要纯JavaScript，那么这些不是您要查找的droid。

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

<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>

希望能有所帮助，问候

---

编辑

此处为纯js版本： http ： //jsfiddle.net/uZcTH/2/

码

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;
    }
}