Question

如果页面属于父列表，我想保持相关列表可扩展。

让我们说我在Vision页面上，然后About列表默认打开，只有这个列表。

$(document).ready(function(){
    $("#expList").find("ol").hide();

  $("#expList > li").click(function(){
    $(this).find("ol").slideToggle();
  });

  $('#expList a[href^="/' + window.location.href + '"]').closest('li').css('display', 'block');
});

我尝试了很少的组合 $('#expList a[href^="/' + window.location.href + '"]').closest('li').css('display', 'block');但是没有工作

页面链接类似于

page.aspx？p = 1时
page.aspx？p = 2时
page.aspx？P = 3
page.aspx？p = 5 .....

Answer 1

根据新的更新，您必须使用window.location.pathname，它返回没有协议和域名的网址路径。现在，您可以使用window.location.pathname获取路径并改为显示ol：

＆＃13;

$(document).ready(function() {
  var url = 'page.aspx?p=5'; // change it to -> window.location.pathname;
  $("#expList").find("ol").hide();

  $("#expList > li").click(function() {
    $(this).find("ol").slideToggle();
  });

  $('#expList a[href^="' + url + '"]').closest('ol').css('display', 'block');
});

＆＃13;

.page-left-bar {
  width: 200px;
  background-color: #fff;
}
ol {
  margin-left: 0px;
  padding-left: 20px;
}
.handbook-page ol {
  color: #687074;
  counter-reset: item;
}
ol {
  counter-reset: item;
  color: #687074;
}
ol li {
  display: block;
  padding: 5px 0;
}
ol li a {
  text-decoration: none;
  color: #687074;
  padding-left: 10px;
}
ol li:before {
  content: counters(item, ".")" ";
  counter-increment: item;
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Click on Contact</h1>
<div class="page-left-bar">
  <ol id='expList'>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news1">News</a>
    </li>
    <li><a href="#contact">Contact</a>
      <ol>
        <li><a href="#home">Sub menu</a>
        </li>
        <li><a href="#news1">Sub menu long name</a>
        </li>
        <li><a href="#contact">Sub menu</a>
        </li>
        <li><a href="#about">Sub menu</a>
        </li>
      </ol>
    </li>
    <li><a href="#about">About </a>
      <ol>
        <li><a href="#home">Mission</a>
        </li>
        <li><a href="page.aspx?p=5">Vision</a>
        </li>
        <li><a href="#contact">Sub menu</a>
        </li>
        <li><a href="#about">Sub menu</a>
        </li>
      </ol>
    </li>
  </ol>
</div>

＆＃13;

如果页面是其子页面，则打开父列表

1 个答案: