javascript - 在 CSS 和 HTML 中创建灯 zipper

Question

请看下图:

我试图在 CSS 中创建上面的内容，然后使用一些 Javascript，这样当人们点击圆圈时，它就会向下拉(即链变长)。下一次点击会将它拉回来。

这是我目前所拥有的，但我不确定我是否走在正确的道路上。

http://jsfiddle.net/5CLUg/9/

#pull-chain{    
    display: block;
    position: absolute;
    right: 70px;
    width: 15px;
}
#pull-chain .chain{
    border-left: 2px dotted #333;
    height: 200px;
}   
#pull-chain .handle{
    background-color: #333;
    width:15px;
    height:15px;
    border-radius: 50%;
    position: relative;
    left: -6px;
}

<div id="pull-chain">
    <div class="chain"></div>
    <div class="handle"></div>
</div>

任何关于如何改进它的想法将不胜感激。

Answer 1

您可以只为 click 事件添加一个事件监听器，并使用 classList.toggle() 添加或删除一个类。然后对于该类，您只需调整 height:

http://jsfiddle.net/5CLUg/5/

var el = document.getElementById("pull-chain");

el.addEventListener("click", function() {
    el.classList.toggle("pulled");
}, false);

CSS:

#pull-chain.pulled .chain {
    height: 350px;
}

如果您也希望它具有动画效果，您应该将 transition 属性添加到原始 .chain 规则集中:

#pull-chain .chain {
    /* removed other declarations for clarity */
    transition: height 0.5s ease-in-out;
}

查看实际效果:http://jsfiddle.net/5CLUg/8/

另外，请注意您的 CSS 非常具体，每个选择器都包含一个 ID 并具有内联样式。从选择器中删除这些 ID 仍会选择相同的元素并使代码更易于维护。 .chain 而不是 #pull-chain .chain 等。那么上面的 CSS 就可以是 .pulled .chain。按照目前的情况，我需要在选择器中包含 ID，以便它比原始的 height 属性更具体。