我正在尝试找到一种方法,当用户单击人字形并展开 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>
那个点击的功能可能不起作用,一个更简洁的方法似乎是焦点:
关于css - 如何在 gsp grails 中动态更改左/下人字形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37618847/