我有可折叠的锚标记(data_1),单击它时会在折叠和展开 div 元素之间切换,如下所示 -
<a href="#href1" class="list-group-item"
data-toggle="collapse" aria-expanded="false">
<i class="glyphicon glyphicon-folder-close"></i>
data_1
<span id="id_2" class="glyphicon glyphicon-eye-open">
</span>
</a>
<div class="list-group collapse" id="href1">
<a href="#href2">data_2</a>
<a href="#href2">data_3</a>
</div>
它按预期工作。但是我想添加一些其他功能,以便当我单击可折叠锚标记内的span 元素 ( glyphicon-eye-open ) 时,必须调用一个 javascript 方法。
我知道通过在 span 元素中添加 onclick = function1() 可以解决问题,但它也可以扩展可折叠锚标记。我不希望仅在单击 span 元素时扩展锚元素。我如何实现这一目标?任何帮助,将不胜感激。
JS小提琴:https : //jsfiddle.net/joshirohit66/v81gofLq/11/
window.clickme = function() {
alert("clicked span but not anchor");
return false;
}
.list-group.list-group-root {
padding: 0;
overflow: hidden;
}
.list-group.list-group-root .list-group {
margin-bottom: 0;
}
.list-group.list-group-root .list-group-item {
border-radius: 0;
border-width: 1px 0 0 0;
}
.list-group.list-group-root>.list-group-item:first-child {
border-top-width: 0;
}
.list-group.list-group-root>.list-group>.list-group-item {
padding-left: 30px;
}
.list-group.list-group-root>.list-group>.list-group>.list-group-item {
padding-left: 45px;
}
.list-group-item .glyphicon {
margin-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="list-group list-group-root well">
<a href="#href1" class="list-group-item" data-toggle="collapse" aria-expanded="false">
<i class="glyphicon glyphicon-folder-close"></i> data_1
<span id="id_2" class="glyphicon glyphicon-eye-open" onclick="return clickme();">
</span>
</a>
<div class="list-group collapse" id="href1">
<a href="#item-1-1" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.1
</a>
<a href="#item-1-2" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.2
</a>
</div>
</div>
我在 javascript 中添加了一条评论,以显示如何/在何处停止传播。
$('.list-group-item .glyphicon').on('click', function (e) {
//stop the propagation of the click on the icon(s)
e.stopPropagation();
console.log('clicked span but not anchor');
});
.list-group.list-group-root {
padding: 0;
overflow: hidden;
}
.list-group.list-group-root .list-group {
margin-bottom: 0;
}
.list-group.list-group-root .list-group-item {
border-radius: 0;
border-width: 1px 0 0 0;
}
.list-group.list-group-root>.list-group-item:first-child {
border-top-width: 0;
}
.list-group.list-group-root>.list-group>.list-group-item {
padding-left: 30px;
}
.list-group.list-group-root>.list-group>.list-group>.list-group-item {
padding-left: 45px;
}
.list-group-item .glyphicon {
margin-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="list-group list-group-root well">
<a href="#href1" class="list-group-item" data-toggle="collapse" aria-expanded="false">
<i class="glyphicon glyphicon-folder-close"></i> data_1
<span id="id_2" class="glyphicon glyphicon-eye-open">
</span>
</a>
<div class="list-group collapse" id="href1">
<a href="#item-1-1" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.1
</a>
<a href="#item-1-2" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.2
</a>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句