1.JQUERY控制CSS样式：
页面部分：指定ID，指定触发事件
<div id=”img1″ style=”width:500px;float:left;” class=”infonav infonav_hidden”>
<p>文章标题</p>
<p>1.文章标题一。</p>
<p>2.文章标题二。</p>
<p>3.文章标题三。</p>
</div>
<div id=”img2″ style=”width:100px;float:left;padding-top:36px;”>
<a border=”0″ style=”border:none;” href=”javascript:” onclick=”infonav_more_down(0);return false;”><img src=”list1.png”></a>
</div>
jquery部分：
<script type=”text/javascript” src=”jquery-1.4.min.js” charset=”UTF-8″></script>
<script type=”text/javascript” charset=”UTF-8″>
//点击效果实现展开
function infonav_more_down(index)
{
var inHeight = ($(“#img1”).eq(index).find(“p”).length)*100;//设置要展开后显示的高度，100是可调数字。
if(inHeight > 65)
{
$(“#img1”).eq(index).css({height:inHeight});
$(“#img2”).eq(index).replaceWith(“<div id=”img2″ style=”width:100px;float:left;padding-top:360px;”><a onclick=”infonav_more_up(” index “);return false;” href=”javascript:”><img src=”list2.png”></a></div>”);
}
else
{
return false;
}
}
//点击效果实现收起
function infonav_more_up(index)
{
var infonav_height = 65;//设置要收起后显示的高度，15是可调数字。
$(“#img1”).eq(index).css({height:infonav_height});
$(“#img2”).eq(index).replaceWith(“<div id=”img2″ style=”width:100px;float:left;padding-top:36px;”><a onclick=”infonav_more_down(” index “);return false;” href=”javascript:”><img src=”list1.png”></a></div>”);
}
</script>
//===
//===
2.Javascript控制CSS样式：
页面部分：指定ID，指定触发事件
<div id=”img5″ class=”show_brand” style=”display: block;” onclick=”b();”></div>
<div id=”img6″ class=”hide_brand” style=”display: none;” onclick=”a();”></div>
javascript部分：
/* js写法：paddingTop ，css写法：padding-top*/
<script>
function a()
{
document.getElementById(“img1″).style.overflow=”hidden”;
document.getElementById(“img2″).style.paddingTop=”75px”;
document.getElementById(“img5″).style.display=”block”;
document.getElementById(“img6″).style.display=”none”;
}
function b()
{
document.getElementById(“img5″).style.display=”none”;
document.getElementById(“img6″).style.display=”block”;
document.getElementById(“img2″).className=”text”;
}
</script>
<style type=”text/css”>
.text{
position:absolute;
left:700px;
bottom:1px;
}
</style>