在浏览器中击中时，以递归方式将Bootstrap 4侧栏扩展到以前的状态

时间：2018-07-15 22:04:48

标签： javascript jquery twitter-bootstrap bootstrap-4

下面的HTML，CSS，Bootstrap 4代码产生了可折叠样式的可折叠/可折叠侧边栏菜单，如下所示：

sidebar-accordion-dropdown-menu

我要做什么

通过 Bootstrap 4 或 jQuery 或直接 JavaScript ...

如果我单击“推草机”链接，然后单击返回，则我希望边栏再次展开上方所有显示“推草机”项的父节点。这意味着侧栏将需要扩展（显示）：园艺，设备和割草机，以便显示先前单击的项目“推草机”。

我要解决的第一步是在使用Javascript单击的最后一项中添加一个URL片段：

<script>
  $('.list-group').on('click', '.list-group-item', function(){
      var clickedID = this.id;
      // alert(clickedID);
      window.location.hash = clickedID;
  });
</script>

接下来，我不确定如何继续。我开始沿着这条路走，但这看起来非常可怕且效率低下，尤其是因为我正在使用Bootstrap 4。

// probably a terrible idea
<script>
  if(window.location.hash) {
      var hash = window.location.hash.slice(1);
      var elem = document.getElementById(hash);
      var node = elem.hash.slice(1);
      var x = document.getElementById(node);
      x.classList.add('show');
      console.log(x);
      var pn = x.parentNode;
      console.log(pn.getAttribute('href'))
  } else {
    // Fragment doesn't exist
  }
</script>

我真的不清楚如何递归扩展给定节点上方的所有父类别。

可再现的HTML，CSS，引导程序：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

<style>
  .leve-0 {
    padding-left: 15px;
  }
  .level-1 {
    padding-left: 30px;
  }
  .level-2 {
    padding-left: 45px;
  }
  .level-3 {
    padding-left: 60px;
  }
</style>

<div class="container-fluid">
  <div class="row">
    <div class="text-nowrap">
      <div id="sidebar">
        <div class="list-group panel">
          <a href="#node11" class="list-group-item level-0" data-parent="#sidebar" data-toggle="collapse"
             aria-expanded="true" id="gardening">Gardening <i class="fa fa-caret-down"></i></a>
          <div class="collapse" id="node11">
            <a href="#node13" class="list-group-item level-1" data-parent="#node13" data-toggle="collapse"
            id="lawn-chemicals">Lawn Chemicals <i class="fa fa-caret-down"></i></a>
            <div class="collapse" id="node13">
              <a href="gardening/lawn-chemicals/moss-control/" class="list-group-item level-2" data-parent="#node13"
              id="moss-control">Moss Control</a>
            </div>
            <a href="#node14" class="list-group-item level-1" data-parent="#node14" data-toggle="collapse"
            id="equipment">Equipment <i class="fa fa-caret-down"></i></a>
            <div class="collapse" id="node14">

              <a href="#node15" class="list-group-item level-2" data-parent="#node15" data-toggle="collapse"
              id="lawn-mowers">Lawn Mowers <i class="fa fa-caret-down"></i></a>
              <div class="collapse" id="node15">
                <a href="gardening/equipment/lawn-mowers/push-mowers/" class="list-group-item level-3" data-parent="#node15"
                id="push-mowers">Push Mowers</a>
                <a href="gardening/equipment/lawn-mowers/riding-mowers/" class="list-group-item level-3" data-parent="#node15"
                id="riding-mowers">Riding Mowers</a>
            </div>
              <a href="gardening/equipment/weed-wackers/" class="list-group-item level-2" data-parent="#node15"
              id="weed-wackers">Weed Wackers</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分：0)

您只需要向上遍历DOM，并且使用jQuery非常简单：

// just mocking history back
var historyHashArray = [
  "push-mowers",
  "equipment",
  "gardening",
  "moss-control",
];

var currentHistoryIndex = 0;

// get reverse order of $ elements
jQuery.fn.reverse = [].reverse;

function expandTree() {
  if (currentHistoryIndex < historyHashArray.length) {
    console.log(historyHashArray[currentHistoryIndex]);
    $('.collapse').removeClass('show'); // resets
    $('#' + historyHashArray[currentHistoryIndex])
      .parents('.collapse')
      .reverse()
      .collapse('show');
    currentHistoryIndex++;
  }
}

document.getElementById('back-btn').onclick = expandTree;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

<style>
  .leve-0 {
    padding-left: 15px;
  }
  .level-1 {
    padding-left: 30px;
  }
  .level-2 {
    padding-left: 45px;
  }
  .level-3 {
    padding-left: 60px;
  }
</style>

<button type="button" id="back-btn" class="mb-3">History Back</button>

<div class="container-fluid">
  <div class="row">
    <div class="text-nowrap">
      <div id="sidebar">
        <div class="list-group panel">
          <a href="#node11" class="list-group-item level-0" data-toggle="collapse"
             aria-expanded="true" id="gardening">Gardening <i class="fa fa-caret-down"></i></a>
          <div class="collapse" id="node11">
            <a href="#node13" class="list-group-item level-1" data-toggle="collapse"
            id="lawn-chemicals">Lawn Chemicals <i class="fa fa-caret-down"></i></a>
            <div class="collapse" id="node13">
              <a href="gardening/lawn-chemicals/moss-control/" class="list-group-item level-2" id="moss-control">Moss Control</a>
            </div>
            <a href="#node14" class="list-group-item level-1" data-toggle="collapse" id="equipment">Equipment <i class="fa fa-caret-down"></i></a>
            <div class="collapse" id="node14">

              <a href="/" class="list-group-item level-2" data-toggle="collapse" id="lawn-mowers">Lawn Mowers <i class="fa fa-caret-down"></i></a>
              <div class="collapse" id="node15">
                <a href="/" class="list-group-item level-3" id="push-mowers">Push Mowers</a>
                <a href="/" class="list-group-item level-3" id="riding-mowers">Riding Mowers</a>
            </div>
              <a href="gardening/equipment/weed-wackers/" class="list-group-item level-2" id="weed-wackers">Weed Wackers</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

更新： 因此，点击事件应该类似于

$(document).ready(function() {
  if (window.location.hash) {
    var id = window.location.hash; // luckily it already includes #
    $(id).parents('.collapse').collapse('show');
  }
});
相关问题
最新问题