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形

2 个答案: