我的导航有一个手风琴菜单,其中有几个列表项中的嵌套项。(我知道我知道手风琴拼写错误)。
<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"> </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。单击父 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>