jq的控制某个区域的收起或者展开

奶茶不甜o

已于 2023-04-11 18:29:01 修改

阅读量295

点赞数

分类专栏： jq html 文章标签： html jquery

于 2023-04-10 10:58:21 首次发布

本文链接：https://blog.csdn.net/qq_23392319/article/details/130055124

版权

html 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

效果：

在这里插入图片描述

Html：

<p class="p_class_many_class">
   <span class="group_name_show">分组名称</span>
   <span class="aButton2"  onclick="show_id_fun('zishen_show_id_{$id}')" id="zishen_show_id_{$id}_name">收起</span><br/>
</p>

<div id="zishen_show_id_{$id}"><!--大循环div,s-->

。。。。内容

</div><!--预算大循环div,e-->

Jq：

<script type="text/javascript">

   function show_id_fun(id)
   {

      if ($('#' + id).is(":visible")) {
         $('#' + id).hide();

         $('#' + id +'_name' ).text('展开');

      } else {
         $('#' + id).show();

         $('#' + id +'_name' ).text('收起');

      }

   }

</script>

Css：

.group_name_show{
    color: #f6f3f3;
    font-size: 15px;
    background: #938e8e;
    margin-left: 3px;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid white;
    padding: 3px;
}

.aButton2{
   cursor: pointer;
   color: #0071e3;
   font-size: 13px;
   font-weight: 400;
   letter-spacing: -.01em;
   font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
   min-width: 23px;
   font-weight: bold;
}