0

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

它似乎可以正常工作，只是默认情况下它不会折叠，因此非常长。我试图按照引导程序的意图将各种 div 和类放在它周围，但我得到了一个非常复杂的混乱和不适当的样式，我将不得不重写。

如果有人可以建议我使用 JavaScript 解决方案来使框在不属于活动树的情况下自动折叠，那将不胜感激。

php生成的nav如下：

注意变量 $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>
4

3 回答 3

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 可以正常工作。此外，要保持活动菜单项打开，您需要向活动“li”元素添加一个类“活动”，然后运行此代码；

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

这将为活动元素的每个父级添加一个“in”类，直到顶层。这将使它们为您打开。

于 2013-05-10T13:54:11.050 回答
0

可能您最简单的解决方案是使用像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”设置为活动状态。您需要首先将数据作为嵌套数组获取，并且您需要通过最大嵌套深度的次数来运行它。

于 2013-05-10T10:07:15.960 回答
0

下面的代码片段有一个更正，它使列表自动折叠，禁止第一个。

在 Joe 的建议下，我还解决了如何保持 open 分支 open 的问题。

 <?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>
于 2013-05-10T10:42:11.850 回答