嵌套的折叠式菜单在页面加载时展开,当前类突出显示导航项目

时间:2013-07-03 14:14:28

标签: javascript jquery

我的导航手风琴菜单中包含几个列表项中的嵌套项目。 (我知道我知道手风琴拼错了。)

<div id="accordian-nav">
        <ul>
            <?php foreach($menu->items() as $item): ?>
                <?php if(empty($item->permissions) || Auth::instance()->logged_in($item->permissions)): ?>
                    <?php if($item->children()): ?>
                    <li>
                        <h3 class="nav-h3"><span class=""></span><?php echo $item->name; ?></h3>
                        <ul>
                            <?php foreach($item->children() as $subitem): ?>
                                <?php if(empty($subitem->permissions) || Auth::instance()->logged_in($subitem->permissions)): ?>
                                    <?php if($subitem->children()): ?>
                                    <li class="podcast-name podcast-options"><a href="<?php echo $subitem->link; ?>"><span class="nav-dash-arrow">&nbsp;</span><?php echo $subitem->name; ?></a>
                                        <ul>
                                            <?php foreach($subitem->children() as $subsubitem): ?>
                                                <?php if(empty($subsubitem->permissions) || Auth::instance()->logged_in($subsubitem->permissions)): ?>
                                                <li><a href="<?php echo $subsubitem->link; ?>"<?php if($tab==$subsubitem->tab) echo ' class="current sub-current"'; ?>><?php echo $subsubitem->name; ?></a></li>
                                                <?php endif; ?>
                                            <?php endforeach; ?>
                                        </ul>
                                    </li>
                                    <?php else: ?>
                                    <li><a href="<?php echo $subitem->link; ?>"<?php if($tab==$subitem->tab) echo ' class="current sub-current"'; ?>><?php echo $subitem->name; ?></a></li>
                                    <?php endif; ?>
                                <?php endif; ?>
                            <?php endforeach; ?>
                        </ul>
                    </li>
                    <?php else: ?>
                    <li><a href="<?php echo $item->link; ?>" title="<?php echo $item->name; ?>"<?php if($tab==$item->tab) echo ' class="current"'; ?>><h3 class="nav-h3"><?php echo $item->name; ?></h3></a></li>
                    <?php endif; ?>
                <?php endif; ?>
            <?php endforeach; ?>
        </ul>
    </div>

我的嵌套列表扩展了我想要的方式,除了我需要扩展它并在加载这些页面时显示嵌套列表项。

这是我的造型jquery。通过PHP添加了一类“当前”     

$(document).ready(function(){
    $("#accordion-nav h3").click(function(){
        $("#accordion-nav ul ul").slideUp();
        if(!$(this).next().is(":visible"))
            {
            $(this).next().slideDown();
                $('#accordion-nav ul li:hover').css('margin-right', '0px');
                    $(this).css('background', '#1F89C6');
                    $(this).css('border-bottom', 'none');
                    $(this).css('border-left', '6px solid #1F89C6');            
            } 
        })
});

这是我的手风琴嵌套列表项的jQuery。单击父级别后,将显示嵌套项目。这很好用,虽然我知道jQuery正在重复,这是一种很差的技术。

<script>
    $('.podcast-name').on('click', function(){
        $('.podcast-name > ul').slideToggle('slow');
    });
</script>

<script>
    $('.podcast-two').on('click', function(){
    $('.podcast-two > ul').slideToggle('slow');
    });
</script>

<script>
    $('.podcast-three').on('click', function(){
    $('.podcast-three > ul').slideToggle('slow');
    });
</script>

现在,我无法弄清楚如何在页面加载上展开此列表并显示活动的导航项。这是我的尝试。

<script>
 $(document).ready(function(){
    $("#accordian-nav li h3").load(function(){
   if ($('#accordian-nav ul li a.current').is(':visible')) 
   {
            $(this).next().slideDown();
   }
   });
 });
</script>

0 个答案:

没有答案