css文字收缩展开样式,css文字收缩展开样式不变

js和css怎么实现收缩和展开？

给你举个例子：

script language="javascript"

function show_div(){

var obj_div=document.getElementById("starlist");

obj_div.style.display=(obj_div.style.display=='none')?'block':'none';

}

function hide_div(){

var obj_div=document.getElementById("starlist");

obj_div.style.display=(obj_div.style.display=='none')?'block':'none';

}

/script

a href="javascript:show_div()" 显示/展开/a

div id="starlist"

内容br/

内容br/

内容br/

内容br/

/div

这样就可以实现

追问

用jQuery实现，该怎么实现？就是不能弹出的那种，就要一个点击了之后就在下方显示的那种，谢谢！

回答

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gbk" /

titleStripingTable/title

script type="text/javascript" src=""/script

script type="text/javascript"

!--

$(document).ready(function(){ });

function changeDisplay(){

var helloDivObj = $("#helloDiv");

var buttonObj = $("#btnDisplay");

var val = buttonObj.attr("value");

if(val=="隐藏"){

helloDivObj.hide();

buttonObj.attr("value","显示");

}else{

helloDivObj.show();

buttonObj.attr("value","隐藏");

}

}

--

/script

/head

body

input id="btnDisplay" type="button" value="隐藏" onclick="changeDisplay()"/

div id="helloDiv"

Hello,everyonep/p

Hello,everytwop/p

Hello,everythreep/p

/div

/bdoy

/html

相关问答

Q1: 请问一下。我想用html、css写出这种效果。点击展开，下面那一行就展开，再点击就收缩回去。怎么写啊？？

css一般处理鼠标移动显示事件，利用:hover很方便就能实现。

点击事件的话，一般跟JS配合。

显示隐藏，一般都是利用display这个CSS来控制，因为它隐藏的时候不占位置。

Q2: 求纯CSS展开收起效果代码，不要有JS在里面的！！！

CSS菜单.html   文件代码清单如下：

!doctype html

html langj="zh"

  head

    meta charset="utf-8"

    titleCSS菜单/title

    link rel="stylesheet" href="cssmenu.css"

  /head

  body

    ul

      lia href=""A/a/li

      lia href=""B/a

        ul

          lia href=""B1/a/li

          lia href=""B2/a/li

          lia href=""B3/a/li

        /ul

      /li

      lia href=""C/a

        ul

          lia href=""C1/a/li

          lia href=""C2/a/li

          lia href=""C3/a/li

        /ul

      /li

      lia href=""D/li

    /ul

  /body

/html

cssmenu.css  文件代码清单如下：

/* cssmenu.css */

ul li, ul li:hover ul {

display: block;

}

ul li ul {

display: none;

}