默认扩展导航

Question

我使用 CODNITIVE 的 Magento 侧边栏导航菜单专业版，并且我正在尝试使其默认扩展。特别是我需要一个解决方案来默认扩展第一个列表项。我尝试在 app/code/community/codnitive/sidenav/block/ 中编辑 Navigation.php：

    $collapsibleClass = '';
    if ($config->isCollapsible()) {
        $collapsibleClass = ' collapsible';
    }

    // add collapsible arrow and wrraper
    $arrow = '';
    $extraStyle = '';
    $collapsibleIconPosition = $config->getCollapsibleIconPosition();
    if ($config->isCollapsible()) {
        $width = $config->getCollapsibleIconType() === 'arrow' ? 8 : 16;
        $height = 0;
        $expanded = 0;
        if ($hasActiveChildren) {
            $width = $config->getCollapsibleIconType() === 'arrow' ? 8 : 16;
            $height = 16;
        }
        if ($height == 0) {
            $extraStyle = ' display:none;';
        }
        if ($height == 0 && $collapsibleIconPosition === 'left') {
            $liMarginLeft += $width;
        }
        if ($this->isCategoryActive($category)) {
            $expanded = 1;
        }

        $expanded = ' expanded="' . $expanded .'"';
        $spanOnclick = 'onclick="Codnitive.expandMenu(this.parentNode)';
        $spanClass   = $config->getCollapsibleIconType() . '-' . $collapsibleIconPosition;
        $arrow = '<span class="' . $spanClass . ' " ' . $spanOnclick . '" style="width: ' . $width . 'px; height: ' . $height . 'px;' . $extraStyle . '"></span>';
    }

如果我添加此代码以扩展所需的类别

        if ($category->getId() == '35') {
        $expanded = 1;
    }

出现两个问题：

1. 即使另一个类别处于活动状态，该类别也会保持展开状态。

2. “加号”（表明类别可以扩展）仍然存在，但应该是“减号”。我猜 $collapsibleIconPosition 应该是“正确的”？

           if ($height == 0 && $collapsibleIconPosition === 'left') {
           $liMarginLeft += $width;
       }
   

Answer 1

试试这个，虽然我不确定它设置为阻止哪个父级。我假设它是 a 标签上方的第一个 <li> 标签，因为 span 标签不是父标签

$( document ).ready(function() {
  $('.nav-1').css( "display", "block" );
});

看看这是不是你想要的http://jsfiddle.net/6VSUm/

Answer 2

您希望在加载（足够）您的 HTML 之后的任何时间执行该 javascript。

如果您的网站使用jQuery，您可以将其放入就绪回调中：

$(function(){
    Codnitive.expand(document.getElementById('the-menu-parent-element-id'))
})

您可以将它放在 html 文档的最后，或者至少放在所有导航 HTML 代码之后。

...
  <script type="text/javascript" language="javascript">
    Codnitive.expand(document.getElementById('the-menu-parent-element-id'))
  </script>
</body>

或者您可以将其放入onload 回调中。 （警告：这可能会干扰您网站上的其他 javascript）如果存在现有的 window.onload，则可以安全地将其添加到该函数的开头或结尾.

window.onload = function(){
  Codnitive.expand(document.getElementById('the-menu-parent-element-id'))
}

---

您要定位的元素是：<ul class="level0 collapsible" ...

目前没有id，所以不能直接使用getElementById()。

一种解决方案（不是我最喜欢的方法）是添加id

<ul id="start-open" class="level0 collapsible" ...

然后展开：

Codnitive.expand(document.getElementById('start-open'))

我认为最好的解决方案是修改 HTML 来做expand 会做的事情：

<li class="level0 nav-1 first parent collapsible" style="margin-left: 0px;">
<span class="plus-right " onclick="Codnitive.expandMenu(this.parentNode)" style="width: 16px; height: 16px;background-position: right center"></span>

<a class="collapsible-wrapper collapse-name" onclick="Codnitive.expandMenu(this.parentNode);return false;" href="#"><span class="category_name">WANT TO BE EXPANDED BY DEFAULT</span></a>

        <ul class="level0 collapsible" style="margin-left: 5px; padding-left: 10px;display: block" expanded="1">

<span class="plus-right"... 获取style="...;background-position: right center"。

<ul class="level0"... 得到 expanded="1" 和 style="...;display:block"

---

如果这对您不起作用，那么查看您的代码的实时版本会非常有帮助。 （小提琴，缺少 JS 和 CSS 是不够的）