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元素时扩展anchor元素。我该如何实现？任何帮助，将不胜感激。

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>

限制可折叠项目以根据特定点击保持折叠状态

1 个答案: