css - 如何在 gsp grails 中动态更改左/下人字形

标签 css grails gsp

我正在尝试找到一种方法,当用户单击人字形并展开 View 时,将 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>

提前致谢

最佳答案

尝试这样的事情:

<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/

关于css - 如何在 gsp grails 中动态更改左/下人字形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37618847/

相关文章:

javascript - 在 div 内动态创建最大宽度/适合的三 Angular 形

grails - 在Spring Security中管理SecUserSecRole

grails - 如何使用不显示 401 请求的登录对话框的基本身份验证实现来实现 Grails spring 安全核心?

javascript - 将 JavaScript 输出移动到其他区域

html - 即 : Vertical align table in middle

css - 网页错误(说完成,但页面上有错误)

grails - 带有navbar-fixed-top的Grails Twitter Bootstrap插件问题

grails - Grails-唯一约束未按预期工作

grails - GSP中的数组索引

Grails - 将 JSON/Map 对象传递给客户端