1

我使用选择器创建了一个带有 CSS 的下拉菜单#nav:hover来激活属性和值transition:height

http://jsfiddle.net/bryank/WXAcm/

我真正想要发生的事情：当用户单击（而不是悬停）#nav:hover菜单下降并保持下降时激活的区域。然后，如果再次单击同一#nav:hover区域，菜单将收缩。

经过一番研究，到目前为止我所了解的，我相信我需要使用 javascript。除了最基本的基础知识之外，我对javascript知之甚少。我目前正在挖掘我能找到的所有相关 javascript，我想我有一些零碎的谜题......但还没有任何功能......有人知道实现这一点的清晰简洁的方法吗？

4

2 回答 2

3

这是一个仅限 CSS 的解决方案：

演示：http: //jsfiddle.net/k7HqE/

HTML

<!-- This is what is clicked, you can rework it to wrap the #nav if want -->
<label for="toggler">CLICK ME</label>

<!-- Hidden checkbox that gets toggled when the `label` is clicked -->
<input id="toggler" type="checkbox">

<!-- Your unmodified nav -->
<div id="nav">
    <!--logo_image--> <a class="bg" href="#"><img src="b&w_logo.jpeg" height="56" width="110" /></a>

    <!---->
    <div style="height:1em;"></div>
    <div style="font-size:1.1em;"><b>Artists</b>
    </div>
    <div style="height:1em;"></div>
    <!---- AND SO ON ---->
</div>

CSS

/* hide the input */
#toggler { display: none; }

/* transition based on input checked state */
input:checked + #nav {
    height:39em;
}
于 2013-04-27T19:41:11.207 回答
0

我想我有一些东西：

Javascript：

document.querySelector("#nav").onclick = function(evt){
    var arClass = this.className.split(" ");
    if(arClass.indexOf("active")>=0){
        this.className = "";   
    } else {
        this.className = "active";
    }
};

笔记

  • indexOf可能不适用于所有浏览器（IE7 和 IE8）。
  • 此功能将替换您在#nav.

CSS：

#nav:hover,#nav.active{
   height:39em;
}

http://jsfiddle.net/JFjwJ/

于 2013-04-27T19:32:12.780 回答