Question

我正试图制作一张幻灯片菜单，我已经开始工作了。这就是我所拥有的：

    var navHeight = 0;
    function slideToggle() {
        var animSpeed = 5;
        var navList = document.getElementById("mainNav").getElementsByTagName('ul');                
        if(getComputedStyle(navList[0], null).display == "none") {  
            var time = setInterval(function() {
            navList[0].style.display = "block";
            if(navHeight < 116) {
                navHeight += animSpeed;
                navList[0].style.height = navHeight + 'px'; 
            }
            else {
                navList[0].style.height = "auto";
                clearInterval(time);
            }
        }, 5);
        }
        else {
            var time = setInterval(function() {
                if(navHeight > 0) {
                    navHeight -= animSpeed;
                    navList[0].style.height = navHeight + 'px'; 
                }
                else {
                    navList[0].style.display = "none";
                    clearInterval(time);
                }
            }, 1);
        }   
    }

https://jsfiddle.net/rzjaz5k5/

就像我说的那样，它的工作方式与预期相同。但是，我想做这样的事情，实际上让它有效：

<script>
    var animSpeed = 5;
    function slideToggle() {
        var navList = document.getElementById("mainNav").getElementsByTagName('ul');                
        if(getComputedStyle(navList[0], null).display == "none") {  
            var time = setInterval(slideDown(time, navList), 5);
        }
        else {
            var time = setInterval(slideUp(time, navList), 1);
        }   
    }
    function slideDown(time, navList) {
        if(getComputedStyle(navList[0], null).height < 116) {
            navList.style.height += animSpeed + "px"; 
//obviously this^ isn't actually going to work because style.height isn't actually a number so I'm going to have to use an intermediate variable but this is the ultimate goal. I actually have to do this:
             x += animSpeed;  //This x has to be a global variable with the current height of my list.
             navList.style.height = x + "px"

        }
        else {
            x = 0;
            clearInterval(time);
        }
</script>

我实际上可以让它工作，除了能够在它开始后退出时间间隔。我确定我可以通过忘记setInterval（）函数来解决这个问题，并且自己完成所有时间（如果javascript实际上有一个不错的函数来获取时间），但我想知道是否有任何时间使这项工作成为第一次的方式。

Answer 1

CSS Tricks has a collection of tricks involving the checkbox hack，这使用一个简单的复选框来维护状态并在相邻元素上使用css样式和动画，它包含一个纯html / css中的滑块

简单的幻灯片切换演示：

<强> CSS

/* Checkbox Hack */

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
label { 
  -webkit-appearance: push-button;
  -moz-appearance: button; 
  display: inline-block;
  margin: 60px 0 10px 0;
  cursor: pointer;
}

/* Default State */
.toggled {
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
   max-height: 0;
   transition: max-height 0.1s ease
}

/* Toggled State */
input[type=checkbox]:checked ~ .toggled {
   max-height: 100px;
   transition: max-height 0.1s ease
}

<强> HTML

<label for="toggle-1">I'm a toggle</label>
<input type="checkbox" id="toggle-1">
<div class="toggled">I'm controlled by toggle. No JavaScript!</div>

有没有一种非丑陋的方法来创建没有jquery的slideToggle效果？

1 个答案: