基于jQuery实现收缩展开功能

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

基于jQuery实现收缩展开功能

来源：阅读：1024 次日期：2016-07-19 15:00:15

温馨提示：小编为您整理了“基于jQuery实现收缩展开功能”,方便广大网友查阅！

本文实例向大家分享了一款基于jQuery实现收起展开功能特效，供大家参考，具体内容如下

效果图：

具体代码：

<html>

<head>

<title>jQuery实现收起展开功能 - 何问起</title><base target="_blank" />

<style>

a{color:darkgreen}

.hovertreeContent{width:300px;text-indent:2em;margin:5px auto;height:60px;overflow:hidden;position:relative;border:1px solid silver;}

.hewenqiToggle{height:20px;background-color:#f0f0f0;border-top:1px solid silver;position:absolute;bottom:0px;width:100%;}

.triangle-down-hovertree { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 16px solid #999;position:absolute;right:0px;left:0px;margin:0px auto; top:2px;cursor:pointer;}

.triangle-up-hovertree { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 16px solid #999; position:absolute;right:0px;left:0px;margin:0px auto;top:2px; }

</style>

</head>

<body>

<h2>jQuery实现收起展开功能</h2>

</div>

受到网店的影响，服装店的生意逐渐有所下降，老板找何问起去谈，大概是准备跟上网购潮流，让何问起准备一下，

要在网上开网店，要为服装店建立网站。

何问起也没说自己经验不足，只说会积极准备。于是抓紧时间查找资料，学习练习。

</div>

$(".hewenqiToggle").on("click", function () {

if ($(".hewenqiToggle").css('position') == "absolute") {

$(".hovertreeContent").height("auto");

$(".hewenqiToggle").css({ "position": "relative" });

$(".hewenqiToggle").find("span").removeClass('triangle-down-hovertree').addClass('triangle-up-hovertree');

}

else

{

$(".hovertreeContent").height("60");

$(".hewenqiToggle").css({ "position": "absolute" });

$(".hewenqiToggle").find("span").removeClass('triangle-up-hovertree').addClass('triangle-down-hovertree');

}

})

</script>

</body>

</html>

以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。

上一篇：使用JavaScript为Kindeditor自定义按钮增加Audio标签

下一篇：基于javascript显示当前时间以及倒计时功能

手机网站地址：基于jQuery实现收缩展开功能

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！