用jquery实现手风琴效果

浏览数：17 / 时间：2015年06月09日

<style type="text/css">
        ul li{
            list-style: none;
            width:200px;
            height:30px;
            text-align: center;
            line-height:30px;
            background-color:deepskyblue;
        }
        ul{
            display:none;
            margin:0;
            padding:0;
        }
        h3{
            width:200px;
            height:30px;
            margin:0;
            padding:0;
            text-align: center;
            line-height:30px;
            background-color:deepskyblue;
        }
    </style>

<body> <h3 id="h3_1">新闻</h3> <ul id="ul1"> <li>新闻</li> <li>新闻</li> <li>新闻</li> </ul> <h3 id="h3_2">体育</h3> <ul id="ul2"> <li>体育</li> <li>体育</li> <li>体育</li> </ul> <h3 id="h3_3">娱乐</h3> <ul id="ul3"> <li>娱乐</li> <li>娱乐</li> <li>娱乐</li> </ul> </body>

<script>
    $("h3").on("click",function(){
        $(‘ul‘).not( $(this).next()).slideUp();//处理当h3高度全回原时 最后点击的那个h3下的ul不能隐藏
        $(this).next().slideToggle();//next():找到每个h3后面紧邻的h3元素；slideToggle():改变h3的高度显示ul li 中的内容
    });
    $("li").hover(function(){//第一个函数表示鼠标移入时发生的事件第二个移除事件
        $(this).css({"background-color":"#FAC7FF"})
    },function(){
        $(this).css({"background-color":"deepskyblue"})
    })
</script>

用jquery实现手风琴效果,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

用jquery实现手风琴效果