限制可折叠项目基于特定点击保持折叠状态

Question

我有可折叠的锚标签 (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>

Answer 1

我在 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>