将CSS转换为jQuery - javascript_前端

将CSS转换为jQuery - javascript

前端

欧方源码 2022-11-08 576次

我正在尝试制作可折叠的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) 校外辅导 (1) 电子元件 (1) 美食 (1) 黑色网页模板 (1) 双语源码 (2) 汽车配件 (1) 开源 (1) 蓝色网页模板 (10) 下载页 (1) 倒计时 (1) 网架 (2) 联动菜单 (1) 模具零件加工网站模板 (1) 站点导航 (1) 家纺针织 (1) 抽奖 (1) 电子设备网站模板 (29) 农业园林 (1) 锁芯锁具网站模板 (1) 企业模板 (1) 职业学校网页模板 (1) 装饰工程网站模板 (2) 培训机构网页模板 (2) 拍卖展会 (1) 蓄电池网站模板 (1) 知识产权网站模板 (1) 服务类网站模板 (1) 绿色网站模板 (2) 劳务派遣 (1) 智能 (1) 服装加盟 (1)