Question

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

Stone Mosaics
Glass Mosaics
Medallions & Murals
Etched Stone

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

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

再次，＆＃34;发现＆＃34;篮网并展示它和它的父母及其孩子（1级）。我希望这是有道理的。这是列表的代码：

<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>

感谢您的所有帮助！

Answer 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/

Answer 2

我通常根据'.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');

在嵌套列表中查找文本

2 个答案: