显示菜单中的面包屑痕迹

Question

我有一个全局菜单和本地菜单，用于products。我想在展示产品时突出显示“我们的产品”链接，并在本地菜单中突出显示该产品及其子页面的名称，以便高亮显示的链接可用作面包屑。我怎样才能做到这一点与jQuery和Codeigniter或只是jQuery。 这里是本地菜单的代码：

<ul id="accordion"> 
<li class="pm"><h2><?php echo anchor('/products/thassos_wonder', 'Thassos Wonder+');?></h2> 
<ul class="product_menu"> 
    <h2><?php echo anchor('/products/thassos_wonder', 'Thassos Wonder+');?></h2> 
    <h2><?php echo anchor('/products/thassos_wonder_advantages', 'Thassos Wonder+ Advantages');?></h2> 
    <h2><?php echo anchor('products/thassos_wonder_associated_products', 'Associated Products');?></h2> 
    <h2><?php echo anchor('/products/thassos_wonder_brochure', 'Download TW+ Brochure');?></h2> 
</ul> 
</li> 


<li class="pm"><h2><?php echo anchor('/products/marble_wonder', 'Marble Wonder+');?></h2> 
<ul class="product_menu" id="mwmenu"> 
    <h2><?php echo anchor('/products/marble_wonder', 'Marble Wonder+');?></h2> 
    <h2><?php echo anchor('/products/marble_wonder_advantages', 'Marble Wonder+ Advantages');?></h2> 
    <h2><?php echo anchor('products/marble_wonder_associated_products', 'Associated Products');?></h2> 
    <h2><?php echo anchor('/products/marble_wonder_brochure', 'Download MW+ Brochure');?></h2> 
</ul> 
</li> 

<li class="pm"><h2><?php echo anchor('/products/polybond', 'Poly Bond+');?></h2> 
<ul class="product_menu" id="pbmenu"> 
    <h2><?php echo anchor('/products/polybond', 'Poly Bond+');?></h2> 
    <h2><?php echo anchor('/products/polybond_advantages', 'PolyBond+ Advantages');?></h2> 
    <h2><?php echo anchor('products/polybond_areas_of_applications', 'Areas of Applications');?></h2> 
    <h2><?php echo anchor('/products/polybond_brochure', 'Download Polybond+ Brochure');?></h2> 
</ul> 
</li> 

这里是本地菜单jQuery代码：

$(function() { 
var pathname = location.pathname; 
var highlight; 
//highlight home 
if(pathname == "/"){ 
    highlight = $('ul#accordion > li:first > a:first'); 
    $('a.active').parents('li').addClass('active'); 
} 
else { 
    var path = pathname.substring(1); 
    if (path) 
     highlight = $('ul#accordion a[href$="' + path + '"]'); 
} 
highlight.attr('class', 'active'); 

// hide 2nd, 3rd, ... level menus 
$('ul#accordion ul').hide(); 

// show child menu on click 
$('ul#accordion > li > a.product_menu').click(function() { 
    //minor improvement 
    $(this).siblings('ul').toggle("slow"); 
    return false; 
}); 

//open to current group (highlighted link) by show all parent ul's 
$('a.active').parents('ul').show(); 

//if you only have a 2 level deep navigation you could 
//use this instead 
//$('a.selected').parents("ul").eq(0).show(); 

}）;

不断学习jquery这样的帮助类型将不胜感激。 谢谢 - G

Answer 1

您可以通过几种不同的方式来做到这一点，一种方法是始终标识您的身体标记和锚点标记，并使用CSS选择器来完成这项工作。

我喜欢用控制器的名称来识别我的身体标记，它非常方便。

在这种情况下，你的身体标记将有ID为“产品”，对你的锚标识结合这一点，你可以使用CSS这样

#products #productLink { 
    color: #ff8833; 
} 

另一种方式来做到这将是一个帮手函数在CI中检查链接是否与当前URI相关，并向锚点添加一个“活动”类，如下所示。

function menu_anchor($uri = '', $title = '', $attributes = array()) 
{ 
    if ($uri == uri_string()) 
    { 
     $attributes['class'] = (isset($attributes['class'])) ? ' active' : 'active'; 
    } 

    return anchor($uri, $title, $attributes); 
} 

Answer 2

我已经创建了一个帮助函数，可以帮助从codeigniter框架中的URL自动创建面包屑。

详情请查看以下职位 -

http://www.thephpx.com/2010/05/12/codeigniter-helper-create-breadcrumb-from-url/

感谢，

费萨尔·艾哈迈德· http://www.thephpx.com/