0

我使用 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;
    }
4

2 回答 2

0

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

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

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

于 2013-10-03T12:42:05.823 回答
0

您希望在加载（足够）您的 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）如果存在现有的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 是不够的）

于 2013-10-03T08:06:03.547 回答