自定义添加的顶部菜单项的活动状态 [Magento topmenu]答案

【问题标题】：Active status of custom added top-menu items [Magento topmenu]自定义添加的顶部菜单项的活动状态 [Magento topmenu]
【发布时间】：2015-05-08 05:04:25
【问题描述】：

在类别菜单项之后添加“HOME”菜单项和其他：在文件project\app\design\frontend\rwd\default\template\page\html\topmenu.phtml中添加两个块home-link和post-menu-links

<nav id="nav">
        <ol class="nav-primary">
            <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('home-link')->toHtml(); ?>
            <?php echo $_menu ?>
            <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('post-menu-links')->toHtml(); ?>
        </ol>
</nav>

这成功地添加了相应的菜单项现在如何保持其活动状态，例如在通过这些块添加的活动菜单项上添加“活动”类？

我尝试了什么

我尝试在 jquery cookie 中单击设置菜单（li）索引时使用通过 jquery cookie。但是失败了

点击并停止加载时
或稍后在网站上推出（以前的 cookie 被激活，在错误的菜单项上主动登录。）

【问题讨论】：

标签： jquery css magento

【解决方案1】：

在您的模板文件中：

project\app\design\frontend\rwd\default\template\page\html\topmenu.phtml

如果链接指向 CMS 页面，您应该找出当前页面标识符。

<li id="the-cms-link">
    <a href="/the-cms-link">The CMS Link</a>
</li>

//Then in the PHP below the menu:
<script>
    var currentPageId = '';

    <?php if (Mage::getSingleton('cms/page')): ?>
        currentPageId = '<?php echo Mage::getSingleton('cms/page')->getIdentifier(); ?>';
    <?php endif; ?>

    if (jQuery('#'+currentPageId).is('li')) {
        jQuery('#'+currentPageId).addClass('active');
    }
</script>

您也可以使用页面 ID 执行此操作，但请记住，您需要从 CMS 块中设置

。

如果您使用不同的链接，例如来自自定义模块的链接，您需要找出当前模块、控制器和操作并检查它们是否匹配任何链接，然后再次使用 jQuery 设置活动类。获取当前模块、控制器和动作：

$moduleName = Mage::app()->getRequest()->getModuleName();
$controllerName = Mage::app()->getRequest()->getControllerName();
$actionName = Mage::app()->getRequest()->getActionName();

【讨论】：

【解决方案2】：

我们可以将 CMS 页面菜单项添加到活动类。

在此顶部菜单中，我添加了 CMS 链接块，并显示为静态块。

我必须创建 jQuery 以在 url 中添加活动 claas

<?php if ($block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('block-name')->toHtml()) { ?>
    <div class="top-menu-nav">
        <ul>
            <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('block-name')->toHtml(); ?>
        </ul>
    </div>
<?php } ?>

<!-- Add custom block Active urls -->

<script type="text/javascript">
require(['jquery', 'jquery/ui'], function($){
  $(document).ready( function() {
    var url = window.location.href; //sets the variable "url" to the pathname of the current window
    var lastChar = url.substr(url.length - 1); 
    if(lastChar == "/") {url = url.substring(0, url.length-1);}
    //console.log(url);
    $('.top-menu-nav a.active').removeClass('active');
    $('.top-menu-nav a').each(function () { 
        url2 = $(this).attr('href');
        if(url2.substr(url2.length - 1) == "/"){ url2 = url2.substring(0, url2.length-1);  } 
        //console.log(url2);
        if(url2 == url){
            $(this).addClass('active');
        }
    });
  });
});
</script>

【讨论】：