在菜单中显示面包屑路径答案

【问题标题】：showing the breadcrumb trail in the menu在菜单中显示面包屑路径
【发布时间】：2010-03-16 17:43:55
【问题描述】：

我有一个用于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

【问题讨论】：

标签： jquery codeigniter menu breadcrumbs

【解决方案1】：

你可以用几种不同的方式来做这件事，一种方法是始终识别你的身体标签和锚标签，并使用 CSS 选择器来完成这项工作。

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

在这种情况下，您的正文标签会将 ID 设置为“产品”，将其与锚点上的 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);
}

【讨论】：

在视图中使用 menu_anchor 函数代替锚函数。
嘿，Dyllon，您能否向我指出有关如何实现上述任何一项的更详细说明。有点失败。
在你的 helpers 目录中创建一个名为 MY_url_helper.php 的文件，并在其中添加 menu_achor 函数。然后在您的视图中将所有对 anchor() 函数的引用更改为要应用活动类的 menu_anchor() 函数。最后确保你的 CSS 中有一个活跃的类
哦，谢谢迪伦，我的文件名称完全不同。虽然您会碰巧知道为什么我在此页面上收到此错误：obsia.com/products/thassos_wonder_advantages 我确实更改了我的应用程序文件夹名称。
这是发布未经测试代码的陷阱之一，我修复了上面的函数，它现在应该可以正常工作，但仍然未经测试。

【解决方案2】：

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

详情请查看以下帖子-

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

谢谢，

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

【讨论】：