如何在 gsp grails 中动态更改 V 形 left/down

Question

我正在尝试找到一种方法，当用户单击人字形并展开视图时，将 lnr-chevron-left 更改为 lnr-chevron-down。

这是我在 gsp 中的代码，但不起作用：

<div class="col-xs-2 col-sm-1 text-right">
<div data-toggle="collapse" data-parent="#accordion" href="#collapse${i}" class="lnr lnr-chevron-left collapsed lnr-chevron-down">

已更新

这是我正在尝试的最后一个代码....

<body>
<div class="col-xs-2 col-sm-1 text-right">
<div data-toggle="collapse" id="changeChevron" data-parent="#accordion" href="#collapse${i}" class="lnr lnr-chevron-left collapsed"></div>                                      
</div>

<script type = "text/javascript">
        var clicked=false;
        $('#changeChevron').click(function(){
         clicked=true;
        });

        if (clicked) {
          $('#changeChevron').removeClass('lnr lnr-chevron-left').addClass('lnr lnr-chevron-down');
        } else {
          $('#changeChevron').removeClass('lnr lnr-chevron-down').addClass('lnr lnr-chevron-left');
        }
</script>
</body>

提前致谢

Answer 1

尝试这样的事情：

<div class="col-xs-2 col-sm-1 text-right">
<div data-toggle="collapse" id="myId" data-parent="#accordion" href="#collapse${i}" class="lnr lnr-chevron-left collapsed">

这是一个示例，由于未经过测试，所以完全脱离了我的头脑，但它会给您思路

<g:javascript>
////$('.lnr-chevron-left').on('click', function() { 
$('#myId').on('click', function() { 
 $(this).removeClass('lnr-chevron-left').addClass('lnr-chevron-down');
event.stopPropagation();
}); 
</g:javascript>

当用户不再点击它时，您需要将其改回

所以你可以尝试这样的事情：

<g:javascript>
var clicked=false;
$('#myId').click(function(){
 clicked=true;
});

if (clicked) {
  $('#myId').removeClass('lnr-chevron-left').addClass('lnr-chevron-down');
} else {
  $('#myId').removeClass('lnr-chevron-down').addClass('lnr-chevron-left');
}
</g:javascript>

那个点击功能可能不起作用，一个更简洁的方法似乎是焦点：

https://api.jquery.com/focus-selector/

Answer 2

也许我来晚了，但如果你有 css，你可以像这样覆盖 css：

.panel-heading .accordion-toggle.collapsed:after {
  /* symbol for "collapsed" panels */
  content: "\e875";
  float: right;
}

.panel-heading .accordion-toggle:after {
  /* symbol for "opening" panels */
  font-family: 'Linearicons-Free';
  content: "\e874";
  float: right;
  font-size:19px;
}

如何在 gsp grails 中动态更改 V 形 left/down

How to change dynamically a chevron left/down in gsp grails

css

grails

gsp