首页 > Web开发 > 详细

Jquery 展开收起

时间:2018-07-24 15:41:16      阅读:214      评论:0      收藏:0      [点我收藏+]

需求:点击展开显示详细内容,收起后隐藏内容

技术分享图片

实现:

Index.cshtml 显示

  ... ...
          <tr>
              <td>
                    <a asp-action="Edit" asp-route-id="@item.Nid" asp-route-lcid="@item.Lcid">编辑</a> |
                    <a asp-action="Delete" asp-route-id="@item.Nid" asp-route-lcid="@item.Lcid">删除</a>  |
                    <a class="ContentDetails">展开</a>
                </td>
            </tr>
            <tr class="Content">
                <td colspan="4">
                    <h5 style="color:cyan;">详细内容:</h5>
                    <p>@Html.Raw(item.HtmlContext)</p>
                </td>
            </tr>
...  ....    

 

Index.cshtml Jquery

<script>
    $(function () {
        $(‘.ContentDetails‘).on(‘click‘, function () {
            var text = $(this).text();
            $(this).text(text === ‘展开‘ ? ‘收起‘ : ‘展开‘);

            if ($(this).parents("tr").next().css("display") == "contents")
                $(this).parents("tr").next().css("display", "none")
            else
                $(this).parents("tr").next().css("display", "contents")
        })
    })
</script>

  

Jquery 展开收起

原文:https://www.cnblogs.com/NICETOMEETYOUSEVEN/p/9360010.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!