0

我有一个动态生成的列表。我想要做的是只显示该人所在页面的嵌套列表。我认为我可以做到这一点的是默认情况下我会隐藏这个列表的所有嵌套项目，只给我（ul）的第一级。我接下来要做的是在嵌套列表中找到页面的名称（页面的名称将始终在导航中），当我找到它时，我想显示所有找到的（li）嵌套（ul ) 和父级 (ul)。目前我得到了它，所以它只向我显示第一级，所以我的列表看起来像这样

Stone Mosaics
Glass Mosaics
Medallions & Murals
Etched Stone

如果我在篮子编织页面上，我需要它看起来像这样：

Stone Mosaics
  Basketweave
    one
    two
    three
  Blanch
  Chex
Glass Mosaics
Medallions & Murals
Etched Stone

因此，再次“找到”Basketweave 并显示它，它是父级和子级（向下一层）。我希望这是有道理的。这是列表的代码：

<div id="subNav">
  <ul>
    <li> <a href="/stone-mosaics?nav=collections">Stone Mosaics</a>
      <ul>
        <li> <a href="/basketweave?nav=collections">Basketweave</a> </li>
        <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
        </ul>
        <li> <a href="/blanch?nav=collections">Blanch</a> </li>
        <li> <a href="/chex?nav=collections">Chex</a></li>
      </ul>
    </li>
    <li> <a href="/glass_mosaics?nav=collections">Glass Mosaics</a> </li>
    <li> <a href="/medallions_and_murals?nav=collections">Medallions &amp; Murals</a>
      <ul>
        <li> <a href="/cucina?nav=collections">Cucina</a> </li>
        <li> <a href="/glow?nav=collections">Glow</a> </li>
        <li> <a href="/Louvre?nav=collections">Louvre</a> </li>
        <li> <a href="/pools?nav=collections">Pools</a> </li>
        <li> <a href="/Tapeti?nav=collections">Tapeti</a> </li>
      </ul>
    </li>
    <li> <a href="/etched_stone?nav=collections">Etched Stone</a>
      <ul>
        <li> <a href="/Barroque?nav=collections">Barroque</a> </li>
        <li> <a href="/Bordo-Antico?nav=collections">Bordo Antico</a></li>
      </ul>
    </li>
  </ul>
</div>

感谢您所有的帮助！

4

2 回答 2

1

由于您无法更改 html 或 css，因此这是一个 jquery 解决方案：

$(document).ready()function(){
    var pathname = window.location.pathname;

    //remove the '/' then remove '?' and everything after it
    var fixpath = pathname.replace('/','').replace(/\?.+/,'');

    //in the case of url with two words, remove '-' and test with first word
    fixpath = fixpath.replace(/-.+/,'');

    //or remove everything after '_'
    fixpath = fixpath.replace(/_.+/,'');

    function capitaliseFirstLetter(string){
        return string.charAt(0).toUpperCase() + string.slice(1);
    }

    fixpath = capitaliseFirstLetter(fixpath);

    $('#subNav li:contains(' + fixpath + ')').parents('ul').show();
    $('#subNav li:contains(' + fixpath + ')').children('ul').show();
}

contains()区分大小写，因此不会找到“basketweave”，但会找到“Basketweave”。找到了一个函数，它将首字母大写以查找匹配项。

示例：http: //jsfiddle.net/hKx8A/8/

于 2013-05-10T14:17:20.907 回答
0

我通常处理每个“.active”类的子导航可见性。

#subNav > ul > li > ul {
    display: none;
    visibility: hidden;
}
#subNav > ul > li.active > ul {
    display: block;
    visibility: visible;
}

我的第一个建议是，你应该在导航生成期间添加这个类（我猜是在后端？）。

如果你想使用 jQuery 来解决它......你可以这样做：

var href            = window.location.pathname,
    pagename        = href.split('/')[1];

$('#subNav > ul > li > a[href*="'+pagename+'"]').parent('li').addClass('active');
于 2013-05-10T14:16:36.573 回答