使用JQuery实现手风琴布局

最新推荐文章于 2024-09-11 15:33:18 发布

weixin_30872499

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量125

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lvniao/p/4638719.html

版权

当鼠标在元素上悬停或移出时，可以通过JQuery的hover方法来给元素绑定两个处理方法，前者用于鼠标悬停，后者用于鼠标移出，因此根据这这特点再设置相应元素的css属性后就可以方便的实现手风琴布局，然而这样的却有个问题，即当鼠标移出时就导致内容被隐藏，示例代码如下：

<html>

<head>

<style>

.title

{

width:300px;

height:25px;

line-height:25px;

text-align:left;

vertical-align:center;

border:1px solid blue;

}

.content

{

width:300px;

height:100px;

display:none;

border:1px solid blue;

}

</style>

$(function(){

$(".title").hover(function(){

$(this).next().css("display", "block");

}, function(){

$(this).next().css("display", "none");

});

})

</script>

</head>

<body>

title1

</div>

content1

</div>

title2

</div>

content2

</div>

title3

</div>

content3

</div>

title4

</div>

content4

</div>

</body>

</html>

鉴于使用hover实现手风琴布局的缺点，可以用另一种方式来实现更好的效果，即先定义一个select类样式，有该类样式的div的display属性为block，然后使用JQuery给发生click事件的title绑定事件处理方法，在改方法中首先移去select类，再给该titile的content添加select样式，代码如下：

<html>

<head>

<style>

.title

{

width:300px;

height:25px;

line-height:25px;

text-align:left;

vertical-align:center;

border:1px solid blue;

}