Bootstrap折叠复杂的行为

时间：2017-09-06 10:45:36

标签： jquery css twitter-bootstrap bootstrap-4

如何在元素层次结构上实现Bootstrap 4折叠（在我的情况下为navbars）

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

Figure 1

具体来说，我希望以下行为

（我相信这是有道理的）

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

Figure 2

使用当前状态

并单击选项B1

Figure 3

这只是折叠导航栏B1

单击选项A

时的另一个示例

Figure 4

这显示了导航栏A

并折叠选项B的所有后代

（导航栏B和导航栏B1）

Figure 5

规则可以归结为3条简单的规则：

1）当点击某个元素时，某些孩子（可能还有其他后代）处于活动状态（此处显示为活动状态）所有子女和后代都会崩溃。

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>

这是Javascript重新实现了手风琴的风格，但兄弟姐妹的孩子更加崩溃

$(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已经实现的手风琴并从某些链接中删除了一些数据属性，以避免插件中的一些自动功能与我的自定义代码之间发生冲突。

2 个答案:

答案 0 :(得分：2)

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实现此目标的“最佳实践”方法。

答案 1 :(得分：1)

好的，我找到了一种方法，可以使用自定义javascript代码执行此操作，并忽略bootstrap中的collapse插件提供的某些所需功能，并根据我的需要重新实现它们。

以下是简化的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>

这是Javascript重新实现了手风琴的风格，但兄弟姐妹的孩子更加崩溃

$(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已经实现的手风琴并从某些链接中删除一些数据属性，以避免pliguin的一些自动功能与我的自定义代码之间的冲突

相关问题
最新问题