1

いくつかのリスト アイテム内にネストされたアイテムを持つナビゲーション用のアコーディオン メニューがあります。(accordian の綴りが間違っていることは知っています)。

<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経由で「current」のクラスが追加されています。

$(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 です。親の ul li をクリックすると、ネストされた項目が表示されます。これはうまく機能しますが、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>
4

0 に答える 0