用于Kirby中嵌套导航树的Bootstrap手风琴

Question

我有一个非常复杂的嵌套式手风琴树导航“正在工作”@ http://www.medlargroup.com客户的测试网站。

它似乎工作正常，但默认情况下它没有折叠，因此非常长。我试图把它周围的各种div和类作为引导程序，但是我得到了一个非常复杂的混乱和不合适的样式，我将不得不重写。

如果有人可以告诉我一个JavaScript解决方案，当不是活动树的一部分时使框自动崩溃，那将非常感激。

php生成的导航如下：

N.B。变量$ id从外部设置为0，并在调用代码段时解析。它是一个递归函数，因此它使标准div包装更加复杂，而另一种js解决方案更具吸引力。

<?php if(!isset($subpages)) $subpages = $site->pages() ?> 

<?php $id+=1 ?>
<ul id="accordiongroup_<?php echo $id ?>" class"collapse in">

<?php
foreach($subpages->visible() AS $p): ?>
<li class="depth-<?php echo $p->depth() ?>">
<a href="#accordiongroup_<?php echo $id+1 ?>" data-toggle="collapse" data-parent="<?php echo $id ?>" >
<?php if($p->hasChildren())
    { echo $p->title() ?></a>
<?php snippet('accordionmenu', array('subpages' => $p->children(), 'id' => $id)) ?> 
<?php $id+=1;}


 else { ?>
    <a class=" <?php echo ($p->isActive()) ? 'active' : '' ?>" href="<?php echo $p->url() ?>"><?php echo $p->title() ?></a>

<?php }
?>    
  </li>
  <?php endforeach;?>
</ul>

Answer 1

你生成的代码中存在很多错误，所以我在这里做了一些，这样你就可以看到发生了什么。我已经删除了手风琴菜单无法使用的所有内容。

<div class="accordion">
<ul id="accordion1" class="collapse in">

<li>
    <a href="#accordion2" data-toggle="collapse" >About</a>

    <ul id="accordion2" class="collapse">
        <li>
            <a data-toggle="collapse" href="http://www.medlargroup.com/about/bio">Biography</a>
        </li>
        <li>
            <a data-toggle="collapse" href="http://www.medlargroup.com/about/cv">CV</a>
        </li>
        <li>
            <a data-toggle="collapse" href="http://www.medlargroup.com/about/press">Press</a>
        </li>
    </ul>

</li>

<li>
    <a href="#accordion3" data-toggle="collapse" >Work</a>

    <ul id="accordion3" class="collapse">
        <li>
            <a href="#accordion4" data-toggle="collapse">Cornwall</a>

            <ul id="accordion4" class="collapse">
                <li>
                    <a data-toggle="collapse" href="http://www.medlargroup.com/work/cornwall/cornwall_early">Cornwall 58-65</a>
                </li>
                <li>
                    <a data-toggle="collapse" href="http://www.medlargroup.com/work/cornwall/cornwall">Cornwall 66-69</a>
                </li>
                <li>
                    <a data-toggle="collapse" href="http://www.medlargroup.com/work/cornwall/cornwall_wave">Cornwall 69, Wave</a>
                </li>
            </ul>

        </li>

        <li>
            <a href="#accordion5" data-toggle="collapse">Whale Moor &amp; Lake District</a>

            <ul id="accordion5" class="collapse">
                <li>
                    <a data-toggle="collapse" href="http://www.medlargroup.com/work/whale_moor/one">Lakeland Hills 72-74</a>
                </li>
                <li>
                    <a data-toggle="collapse" href="http://www.medlargroup.com/work/whale_moor/two">Lakeland Hills 74-76</a>
                </li>
                <li>
                    <a data-toggle="collapse" href="http://www.medlargroup.com/work/whale_moor/three">Lakeland Hills 80</a>
                </li>
                <li>
                    <a data-toggle="collapse" href="http://www.medlargroup.com/work/whale_moor/four">High Places 82-83</a>
                </li>
                <li class="active">
                    <a data-toggle="collapse" href="http://www.medlargroup.com/work/whale_moor/lakes">Lakes of Cumberland 82</a>
                </li>
            </ul>
        </li>

        <li>
            <a href="#accordion6" data-toggle="collapse">Galloway &amp; Scottish Coast</a>

            <ul id="accordion6" class="collapse">
                <li class="depth-3">
                    <a  data-toggle="collapse" href="http://www.medlargroup.com/work/galloway/first">Galloway Coast 72-74</a>
                </li>
                <li class="depth-3">
                    <a  data-toggle="collapse" href="http://www.medlargroup.com/work/galloway/drumbreddan">Drumbreddan 76</a>
                </li>
                <li class="depth-3">
                    <a  data-toggle="collapse" href="http://www.medlargroup.com/work/galloway/pebble">Pebble Series 77-79</a>
                </li>
                <li class="depth-3">
                    <a  data-toggle="collapse" href="http://www.medlargroup.com/work/galloway/fidden">Fidden & The Isle of Mull</a>
                </li>
                <li class="depth-3">
                    <a  data-toggle="collapse" href="http://www.medlargroup.com/work/galloway/later">Later</a>
                </li>
            </ul>

        </li>

        <li>
            <a data-toggle="collapse" href="http://www.medlargroup.com/work/durdle">South Coast</a>
        </li>

        <li>
            <a href="#accordion7" data-toggle="collapse">Figures</a>

            <ul id="accordion7" class="collapse">
                <li>
                    <a data-toggle="collapse" href="http://www.medlargroup.com/work/figures/one">Figures 81</a>
                </li>
                <li">
                    <a data-toggle="collapse" href="http://www.medlargroup.com/work/figures/two">Figures 82-84</a>
                </li>
                <li class="depth-3">
                    <a  data-toggle="collapse" href="http://www.medlargroup.com/work/figures/three">Figures on the Beach 83</a>
               </li>
            </ul>

        </li>

        <li>
            <a  data-toggle="collapse" href="http://www.medlargroup.com/work/london">London</a>
        </li>

        <li>
            <a data-toggle="collapse" href="http://www.medlargroup.com/work/mersey">Merseyside</a>
        </li>

        <li>
            <a data-toggle="collapse" href="http://www.medlargroup.com/work/northumberland">Northumberland</a>
        </li>

        <li>
            <a href="#accordion8" data-toggle="collapse" >Wales &amp; the Llyn Peninsula</a>

            <ul id="accordion8" class="collapse">
                <li>
                    <a data-toggle="collapse" href="http://www.medlargroup.com/work/wales/one">Llanina 82</a>
               </li>
                <li>
                    <a data-toggle="collapse" href="http://www.medlargroup.com/work/wales/two">llyn</a>
                </li>
            </ul>

        </li>
    </ul>
  </li>

  <li>
    <a data-toggle="collapse" href="http://www.medlargroup.com/contact">Contact</a>
  </li>
</ul>
</div>

这会整理代码，以便各种css选择器和javascript可以正常工作。 此外，要保持活动菜单项处于打开状态，您需要将一个类“active”添加到活动的“li”元素，然后运行此代码;

<script type="text/javascript">
    $('.active').parentsUntil('div.accordion').addClass('in');
</script>

这将为活动元素的每个父级添加一个“in”类，直到顶级。这将使他们对你开放。

Answer 2

可能最简单的解决方案是使用像这样的https://github.com/tommcfarlin/Collapsible-Menus这样的JQuery插件。它易于使用，并且不需要额外的标记。

但是，您正尝试使用Bootstrap执行此操作，因此我将尝试帮助您找到使用它的解决方案。 首先要注意的是代码中的一些错误;

<ul id="accordiongroup_2" class"collapse in">

应该是

<ul id="accordiongroup_2" class="collapse in">

这可能会妨碍一些关键风格的发挥。基本上，要折叠子菜单，您只需要给'ul'一类“折叠”。然后是使用逻辑来解决哪个是您的活动菜单项，而不是将折叠的类添加到该项。

你的问题会出现，试图找出父'li'，所以你也不要崩溃它们。在服务器端执行此操作的一种方法可能是创建一个小函数，用于测试'li'元素是否具有子项'ul'且子项'li'处于活动状态。如果是这样，那么设置'li'也是活动的。您需要首先将数据作为嵌套数组获取，并且需要以最大嵌套深度的次数运行它。

Answer 3

以下代码段有一个更正，使列表自动崩溃，禁止第一个。

根据乔的建议，我也解决了如何保持开放分支开放的问题。

 <?php if(!isset($subpages)) $subpages = $site->pages() ?> 

<?php $id+=1;
foreach($site->breadcrumb() AS $crumb): 
   $breadcrumb[] = $crumb->url();
    endforeach ?>


<ul id="accordiongroup_<?php echo $id ?>" class="collapse <?php if ($id==1) {echo 'in';}?> 

<?php 
foreach ($subpages->visible() AS $sp):
if(in_array($sp->url(), $breadcrumb)) {echo 'in';}
endforeach; ?>
">


<?php

foreach($subpages->visible() AS $p): ?>
<li class="depth-<?php echo $p->depth() ?>">

<?php if($p->hasChildren()){?>
    <a href="#accordiongroup_<?php echo $id+1 ?>" data-toggle="collapse" data-parent="<?php echo $id ?>"> <?php  echo $p->title() ?></a>
<?php snippet('accordionmenu', array('subpages' => $p->children(), 'id' => $id)) ?> 
<?php $id+=1;}


 else { ?>
    <a class=" <?php echo ($p->isActive()) ? 'active' : '' ?>" href="<?php echo $p->url() ?>"><?php echo $p->title() ?></a>

<?php }
?>    
  </li>
  <?php endforeach;?>
</ul>