首页 > 代码库 > 用jquery实现手风琴效果

用jquery实现手风琴效果

2024-07-18 01:51:22   222人阅读

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






























        

            
                
                  
                
                

                    联系

                    我们