Bootstrap 3嵌套的可折叠元素，包含显示和隐藏的事件

时间：2016-09-19 15:06:10

标签： javascript jquery twitter-bootstrap

我正在使用Bootstrap折叠来创建第3个菜单级别。我将panel-active类添加到父级，以便在CSS中将more更改为less。问题是，当我打开Item 2.1时，panel-active类被添加到#test3（这是好的）和#test2（这是不好的）。当我打开/隐藏shown.bs.collapse并且我不知道它为什么会发生时，似乎Bootstrap hidden.bs.collapse和Item 2.1事件会发射两次。< / p>

要重现此问题，请尝试隐藏Item 2.1。

＆＃13;
＆＃13; 
$('.panel-collapse').on('shown.bs.collapse', function() {
  $(this).parent().addClass('panel-active');
});

$('.panel-collapse').on('hidden.bs.collapse', function() {
  $(this).parent().removeClass('panel-active');
});
＆＃13; 
.container {
  margin-top: 50px;
}
.list-group-item.panel {
  margin-bottom: 0;
}
.sidebar-submenu {
  padding: 0;
  list-style: none;
}
.sidebar-submenu a {
  padding-left: 30px !important;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  display: block;
}
.sidebar-submenu .sidebar-submenu a {
  padding-left: 60px !important;
}
.list-group a[data-toggle] {
  position: relative;
}
.list-group-item > a[data-toggle]:after,
.sidebar-submenu-item > a[data-toggle]:after
{
  content: 'more';
  position: absolute;
  right: 10px;
  top: 6px;
  color: #333;
  z-index: 438
}
.panel-active > a[data-toggle]:after {
  content: 'less'
 }
.list-group .list-group-item a {
  padding: 13px 12px;
  display: block;
  border-bottom: 1px solid #eee;
}
.list-group .list-group-item {
  padding: 0;
}
＆＃13; 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <ul class="list-group" id="sidebar-menu">

        <li class="list-group-item panel panel-default">
          <a href="#test1" data-toggle="collapse" data-parent="#sidebar-menu" class="collapsed"><i class="fa fa-check fa-fw icon-left"></i>Item 1</a>
          <div class="panel-collapse collapse" id="test1">
            <ul class="sidebar-submenu">
              <li class="sidebar-submenu-item"><a href="#">Item 1.1</a>
              </li>
              <li class="sidebar-submenu-item"><a href="#">Item 1.2</a>
              </li>
              <li class="sidebar-submenu-item"><a href="#">Item 1.3</a>
              </li>
            </ul>
          </div>
        </li>
        <li class="list-group-item panel panel-default">
          <a href="#test2" data-toggle="collapse" data-parent="#sidebar-menu" class="collapsed"><i class="fa fa-check fa-fw icon-left"></i>Item 2</a>
          <div class="panel-collapse collapse" id="test2">
            <ul class="sidebar-submenu">
              <li class="sidebar-submenu-item">
                <a href="#test3" data-toggle="collapse" class="collapsed">Item 2.1</a>
                <div class="panel-collapse collapse" id="test3">
                  <ul class="sidebar-submenu">
                    <li class="sidebar-submenu-item"><a href="#">Item 2.1.1</a>
                    </li>
                    <li class="sidebar-submenu-item"><a href="#">Item 2.1.2</a>
                    </li>
                    <li class="sidebar-submenu-item"><a href="#">Item 2.1.3</a>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="sidebar-submenu-item"><a href="#">Item 2.2</a>
              </li>
              <li class="sidebar-submenu-item"><a href="#">Item 2.3</a>
              </li>
            </ul>
          </div>
        </li>

      </ul>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：3)

当您点击某个孩子时，您也点击了该父元素，因此父母和孩子的两个事件都会触发。要仅触发子事件并停止它传播dom树，请添加e.stopPropagation()，如下所示。

$('.panel-collapse').on('shown.bs.collapse', function(e) {
  e.stopPropagation();
  $(this).parent().addClass('panel-active');
});

$('.panel-collapse').on('hidden.bs.collapse', function(e) {
  e.stopPropagation();
  $(this).parent().removeClass('panel-active');
});
.container {
  margin-top: 50px;
}
.list-group-item.panel {
  margin-bottom: 0;
}
.sidebar-submenu {
  padding: 0;
  list-style: none;
}
.sidebar-submenu a {
  padding-left: 30px !important;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  display: block;
}
.sidebar-submenu .sidebar-submenu a {
  padding-left: 60px !important;
}
.list-group a[data-toggle] {
  position: relative;
}
.list-group-item > a[data-toggle]:after,
.sidebar-submenu-item > a[data-toggle]:after
{
  content: 'more';
  position: absolute;
  right: 10px;
  top: 6px;
  color: #333;
  z-index: 438
}
.panel-active > a[data-toggle]:after {
  content: 'less'
 }
.list-group .list-group-item a {
  padding: 13px 12px;
  display: block;
  border-bottom: 1px solid #eee;
}
.list-group .list-group-item {
  padding: 0;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <ul class="list-group" id="sidebar-menu">

        <li class="list-group-item panel panel-default">
          <a href="#test1" data-toggle="collapse" data-parent="#sidebar-menu" class="collapsed"><i class="fa fa-check fa-fw icon-left"></i>Item 1</a>
          <div class="panel-collapse collapse" id="test1">
            <ul class="sidebar-submenu">
              <li class="sidebar-submenu-item"><a href="#">Item 1.1</a>
              </li>
              <li class="sidebar-submenu-item"><a href="#">Item 1.2</a>
              </li>
              <li class="sidebar-submenu-item"><a href="#">Item 1.3</a>
              </li>
            </ul>
          </div>
        </li>
        <li class="list-group-item panel panel-default">
          <a href="#test2" data-toggle="collapse" data-parent="#sidebar-menu" class="collapsed"><i class="fa fa-check fa-fw icon-left"></i>Item 2</a>
          <div class="panel-collapse collapse" id="test2">
            <ul class="sidebar-submenu">
              <li class="sidebar-submenu-item">
                <a href="#test3" data-toggle="collapse" class="collapsed">Item 2.1</a>
                <div class="panel-collapse collapse" id="test3">
                  <ul class="sidebar-submenu">
                    <li class="sidebar-submenu-item"><a href="#">Item 2.1.1</a>
                    </li>
                    <li class="sidebar-submenu-item"><a href="#">Item 2.1.2</a>
                    </li>
                    <li class="sidebar-submenu-item"><a href="#">Item 2.1.3</a>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="sidebar-submenu-item"><a href="#">Item 2.2</a>
              </li>
              <li class="sidebar-submenu-item"><a href="#">Item 2.3</a>
              </li>
            </ul>
          </div>
        </li>

      </ul>
    </div>
  </div>
</div>

相关问题
最新问题