进行事件绑定 $quot#btnquottoggle function $quot#divquothide 第1，3，5，7，8，9次点击按钮，div隐藏 ， function $quot#divquotshow 第2，4，6，8次点击按钮，div显示。

要实现父元素内子元素的两行排列并显示隐藏内容，可结合HTMLCSS和JavaScript完成，具体步骤如下1 HTML结构搭建创建父容器和子元素，并添加“显示更多”按钮ltdiv id=#34container#34 ltdiv id=#34flexcontainer#34 ltdiv class=#34item#34item1ltdiv ltdiv cl。

ltscript type=quottextjavascriptquot src=quotjsjqjsquotltscriptlt！这里要引入jQuery库ltscript type=quottextjavascriptquot$function $quoticonquotclickfunction if$thishtml==quot+quot $thishtmlquotquot else $thishtmlquot+quot。

4给div设置隐藏的样式在lttitle标签后面为id为hide设置样式display，这个样id为hide的div就会被隐藏掉了5为button按钮添加一个点击后隐藏事件点击button按钮后，把隐藏的div的display修改为block，这样点击后div就会显示了6保存好html后使用浏览器打开，点击button按钮就会发现隐藏的div。

3在a标签的下面，创建一个div模块，在div内写上测试的文字代码如下4在testhtml文件内，创建css标签，在css内初始化页面所有元素样式，设置内外边距都为0 5使用css设置div隐藏display，并且设置div内的文字颜色为红色colorred6使用css设置li的hover属性，实现当鼠标放在li标签内的a链接上面时，通过把div的display属性设置为。

实现这种功能的jquery是相当简单的，list元素鼠标移入，当前元素里的 span显示移出则相反，具体代码如下function鼠标移入$#39list#39mouseenterfunction这里使用mouseover也可以，使用mouseenter是防止冒泡thisfind#39span#39show这里的show可以改成animate，toggle都可以。

ltbody onLoad=#39setAllVisible#39 ltp align=quotcenterquot lta href=quot#quotonClick=#39documentgetElementByIdquotlt%=rsquotidquot%quotstylevisibility=quotvisiblequot#39点击这里，打开隐藏内容lta ltp ltdiv id=quotlt%=rsquotidquot%quot你看到了隐藏的内容了吗ltdiv ltbody lthtml。

1首先引入jquery 2给每个按钮绑定绑定同一个onclick方法， 如fnidfnid ifid==#391#39 quot#1quotshowquot#2quothidequot#3quothideelse ifid==#392#39 quot#2quotshowquot#1quothidequot#3quothideelse if 方法虽然笨了点，但绝对管。

lt！doctype htmllthtmlltheadltmeta charset=quotutf8quotlttitlediv显示隐藏lttitleltscript type=quottextjavascriptquot src=quotjquery183minjsquotltscriptltstyle type=quottextcssquot* margin0 padding0a textdecoration color#333。