有了jquery，简单3行代码即实现层的显示与隐藏_网页布局

有了jquery，简单3行代码即实现层的显示与隐藏: 发布时间：2019-11-11编辑：脚本学堂

有了jquery，简单3行代码，实现层的显示与隐藏。

<!doctype html>
    <html>
    <head>
    <FCK:meta charset="gbk"  />
    <title>3行代码实现显示与隐藏</title>
    <script type="text/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>" src="/source/js/<a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>1.3.2.js"></script>
    <style>
    .showmore{ float:left;}
    .cont .aa {
    height: auto;
    width: 400px;
    border: 1px solid #000000;
    margin-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
    float: left;
    }
    .cont .aa .a1 {
    float: left;
    height: 30px;
    width: 300px;
    }
    .cont .aa .a2 {
    height: 30px;
    width: 350px;
    float: left;
    display:none;
    }
    </style>
    </head>
    <body>
    <div class="cont">
    <div class="aa">
    <div class="a1">vbcvbcvbcvbcvbcvb</div>
    <div class="showmore"><a href="#" _fcksavedurl="#"><span>显示</span></a></div>
    <div class="a2">详细说明：今天你要嫁给我嘛~</div>
    </div>
    <div class="aa">
    <div class="a1">vbcvbcvbcvbcvbcvb</div>
    <div class="showmore" ><a href="#" _fcksavedurl="#"><span>显示</span></a></div>
    <div class="a2">详细说明：北京、上海四日游</div>
    </div>
    <div class="aa">
    <div class="a1">vbcvbcvbcvbcvbcvb</div>
    <div class="showmore" ><a href="#" _fcksavedurl="#"><span>显示</span></a></div>
    <div class="a2">详细说明：河南是华夏文明的根源</div>
    </div>
    </div>
    <script>
$(".showmore a span").click(function(e){
  $(this).html(["显示", "隐藏"][this.hutia^=1]);
  $(this.parentNode.parentNode).next().toggle();
  e.preventDefault();
});
</script>
    </body>
    </html>

提示：可修改代码后再运行!

上一篇：鼠标滑过显示头像效果的文章列表
下一篇：时间可控的jquery层的show和hide效果

与有了jquery，简单3行代码即实现层的显示与隐藏有关的文章

本文标题：有了jquery，简单3行代码即实现层的显示与隐藏
本页链接：http://www.jb200.com/tx/16.html

有了jquery，简单3行代码即实现层的显示与隐藏