默认情况下展开导航 - Expanded navigation by default

我使用CODNITIVE为Magento提供的侧边栏导航菜单专业版，我正在尝试使其默认扩展。特别是，我需要一个解决方案来默认仅扩展第一个列表项。我尝试在应用程序/代码/社区/编码/侧导航/块/中编辑导航.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;
    }

出现了两个问题：

即使另一个类别处于活动状态，该类别也会保持展开状态。
加号"(表示类别可以扩展(仍然存在，但它应该是"减号"。我想$collapsibleIconPosition应该是"正确的"？
```
        if ($height == 0 && $collapsibleIconPosition === 'left') {
        $liMarginLeft += $width;
    }
```

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

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

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

你想在

(足够多的(你的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是不够的(