将CSS转换为jQuery

Question

I am trying to make a collapsible div/panel/rows. 我正在尝试制作可折叠的div / panel / rows。 I want to add arrow icon (right and down arrow) using jquery/javascript. 我想使用jquery / javascript添加箭头图标（向右和向下箭头）。 Do you have idea on how to translate my CSS code on jQuery? 您对如何在jQuery上转换CSS代码有想法吗？

Here's my jQuery code: 这是我的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"});
    });
});

Here's my css code: 这是我的CSS代码：

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

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

Here's my HTML code: 这是我的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>

Answer 1

check this snipped.just toggle the class on hide and show events 选中此片段。只需在隐藏和显示事件上切换类

 $(".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 Bin</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>

将CSS转换为jQuery

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-03-16 04:13:50

将CSS转换为jQuery

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-03-16 04:13:50

解决方案1
0 已采纳 2016-03-16 04:13:50