将CSS转换为jQuery - javascript_前端

将CSS转换为jQuery - javascript

前端

欧方源码 2022-11-08 1384次

我正在尝试制作可折叠的div / panel / rows。我想使用jquery / javascript添加箭头图标（向右和向下箭头）。您对如何在jQuery上转换CSS代码有想法吗？
这是我的jQuery代码：

$(document).ready(function(){
    $(".collapse").on("hide.bs.collapse", function(){
        $(".arrows").after().css({"content":"\e080","font-family": "Glyphicons Halflings"});
    });
    $(".collapse").on("show.bs.collapse", function(){
        $(".arrows").after().css({"content":"\e114","font-family": "Glyphicons Halflings"});
    });
});

这是我的CSS代码：

.arrows:after {
    font-family: "Glyphicons Halflings";
    content: "\e114";
}

.arrows.collapsed:after {
    font-family: "Glyphicons Halflings";
    content: "\e080";
}

这是我的HTML代码：

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible panel <span class="arrows"></span></a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>

最佳答案
选中此片段。只需在隐藏和显示事件上切换类

$(".collapse").on("hide.bs.collapse", function() {
  $(this).parent().find('.arrows').addClass('collapsed');
});
$(".collapse").on("show.bs.collapse", function() {
  $(this).parent().find('.arrows').removeClass('collapsed');
});


.arrows:after {
  font-family: "Glyphicons Halflings";
  content: "\e114";
}
.arrows.collapsed:after {
  font-family: "Glyphicons Halflings";
  content: "\e080";
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>js</title>
</head>

<body>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible panel <span class="arrows collapsed"></span></a>
      </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">Panel Body</div>
        <div class="panel-footer">Panel Footer</div>
      </div>
    </div>
  </div>
</body>

</html>

会员中心开通VIP 在线客服

声明：本站资源来自网络或会员自行发布，请勿用于非法及商业用途，如果侵犯了您的权益请与我们联系!

上一篇: 通过CSS实现名称两端对齐

下一篇: 前端的技术栈主要有哪些

栏目导航

热门资源

热门标签

新型材料 (1) tab标签 (3) 博客网站模板 (7) 能源 (1) 建筑工程 (2) 资讯源码 (3) 培训机构网页模板 (2) 新闻 (1) 火锅网页模板 (2) 口红 (1) 设备维修 (1) 绿色模板 (4) 白事用品 (1) 开源 (1) 帐篷网站模板 (1) 手机模板 (2) 淘宝购物车 (1) 联动代码 (1) 红色网站模板 (3) 地板网页模板 (1) 大气网站模板 (1) 幻灯片 (3) 空间设计网站模板 (1) 影视网页模板 (1) 注册表单 (1) 弹层 (1) 冷干机 (1) 工程建筑网站模板 (9) 房产合同服务模板 (1) 新能源 (1) 宠物用品 (1) 狗粮 (1)