jquery - Bootstrap Collapse 复杂行为

Question

我如何在元素层次结构(在我的例子中是导航栏)上实现 Bootstrap 4 折叠

我的页面的某些元素具有以下层次结构，我希望在此“树”中使用折叠行为。

特别是我希望有以下行为

(我认为这是有道理的)

绿色表示导航栏显示，红色表示折叠

当前状态

然后点击选项 B1

这只是折叠导航栏 B1

在另一个例子中，当点击选项 A 时

这显示了导航栏 A

并折叠选项 B 的所有后代

(导航栏 B 和导航栏 B1)

规则可以归结为 3 个简单的规则:

1) 当点击一个有一些 child (可能还有其他后代)活跃的元素(这里是活跃的我的意思是显示)时，所有的 child 和后代都会崩溃。

2) 单击没有事件子元素的元素 X 时，显示 X 的(直接)子元素并折叠 X 的兄弟元素的所有后代。

3) 主导航的所有后代都加载折叠

我可以通过自定义 javascript 代码获得所需的行为，不幸的是，我需要忽略 bootstrap 的折叠插件已经提供的一些所需功能，并根据我的需要重新实现它们。

前往此处获取 Bootply

这是简化的 HTML 部分

<nav id="main-nav" class="navbar navbar-expand-lg navbar-dark">
    <ul class="navbar-nav align-nav">
        <li class="nav-item">
            <a id="togglenavA" class="nav-link" href="#" data-target="#navA" aria-controls="navA" aria-expanded="false" aria-label="Toggle navigation">Option A</a>
        </li>
        <li class="nav-item">
            <a id="togglenavB" class="nav-link" href="#" data-target="#navB" aria-controls="navB" aria-expanded="false" aria-label="Toggle navigation">Option B</a>
        </li>
    </ul>
</nav>
<div id="navA" class="collapse">
    <nav id="NAVA" class="navbar navbar-expand-lg navbar-dark">
        <ul class="navbar-nav align-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Option A1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Option A2</a>
            </li>
        </ul>
    </nav>
</div>
<div id="navB" class="collapse">
    <nav id="NAVB" class="navbar navbar-expand-lg navbar-dark">
        <ul class="navbar-nav align-nav">
            <li class="nav-item">
                <a id="togglenavB1" class="nav-link" href="#" data-target="#navB1" aria-controls="navB1" aria-expanded="false" aria-label="Toggle navigation">Option B1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Option B2</a>
            </li>
        </ul>
    </nav>
</div>
<div id="navB1" class="collapse">
    <nav id="NAVB1" class="navbar navbar-expand-lg navbar-dark">
        <ul class="navbar-nav align-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Option B1.1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Option B1.2</a>
            </li>
        </ul>
    </nav>
</div>

这里是重新实现 Accordion 样式的 Javascript，但带有 sibling 的 child 的额外折叠

$(document).ready(function() {
    $('#togglenavA').click(function() {
        $('#navB').collapse('hide')
        $('#navB1').collapse('hide')
        $('#navA').collapse('toggle')
        $('#navA').on('hidden.bs.collapse', function () {
            $('#togglenavA').attr("aria-expanded","false");
        }) // for screen readers purpose
        $('#navA').on('shown.bs.collapse', function () {
            $('#togglenavA').attr("aria-expanded","true");
        })
    });
    $('#togglenavB').click(function() {
        $('#navA').collapse('hide')
        $('#navB1').collapse('hide')
        $('#navB').collapse('toggle')
        $('#navB').on('hidden.bs.collapse', function () {
            $('#togglenavB').attr("aria-expanded","false");
        })
        $('#navB').on('shown.bs.collapse', function () {
            $('#togglenavB').attr("aria-expanded","true");
        })
    });
    $('#togglenavB1').click(function() {
        $('#navB1').collapse('toggle')
        $('#navB1').on('hidden.bs.collapse', function () {
            $('#togglenavB1').attr("aria-expanded","false");
        })
        $('#navB1').on('shown.bs.collapse', function () {
            $('#togglenavB1').attr("aria-expanded","true");
        })
    });
});

注意:尽管这个解决方案解决了我的问题，但这样做的代价是忽略了 Bootstrap 已经实现的 Accordion ，并从一些链接中删除了一些数据属性，以避免插件中的一些自动功能与我的自定义代码发生冲突.

Answer 1

Working Bootply example

我的方法涉及以下更新:

---

1。在您的链接中包含缺少的属性 ( <a> )

添加 data-toggle="collapse"菜单链接的属性。这将为您提供开箱即用的预期 Bootstrap 折叠行为。示例:

<a id="togglenavA" class="nav-link" href="#" data-toggle="collapse" data-target="#navA" aria-controls="navA" aria-expanded="false" aria-label="Toggle navigation">Option A</a>

---

2。加个二级类collapse-child

这允许我们定位这些子导航栏。示例:

<div id="navA" class="collapse collapse-child">

---

3。 JavaScript

然后可以将 JavaScript 简化为以下代码段:

$(document).ready(function() {
  var hideChildren = function() {
    $('div.collapse-child').collapse('hide');
  };

  $('a.nav-link:not([aria-controls])').click(function(el){
    hideChildren();
  });

  $('#main-nav a').click(function(){
    hideChildren();
  });
});

---

我不确定这是否满足您“无需自定义 Javascript”的要求，但我认为这是使用最新版本的 Bootstrap4 实现此目的的“最佳实践”方式。