Question

我正在处理“垂直”列表，当用户单击父项时，列表会显示子项，如果与URL匹配，子项的颜色也会更改为红色。

如果子项具有active-menu类，我希望父导航处于打开状态。

我正在使用下面的脚本，但是它不起作用，不确定我缺少什么

$(".nav-w > ul > li > a").click(function() {
  $(this).next().slideToggle();
});


//open active list
$('.nav-w ul li').children().has('.active-menu').css('display', 'block');


// compare url with nav url to show active url 
$(function() {
  //var url = window.location.href;
  var url = window.location.pathname;
  var pgurl = window.location.href.substr(
    window.location.href.lastIndexOf("/") + 1
  );
  $(".nav-w ul li a").each(function() {
    if ($(this).attr("href") == url || $(this).attr("href") == "") {
      $(this).addClass("active-menu");
    }
  });

  console.log("url : " + window.location.pathname);
});

.nav-w a {
  color: black;
  padding: 10px 15px;
  padding-left: 35px;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #f1f1f1;
  font-size: 12px;
  font-weight: 600;
  /* color: #178B43 !important; */
  color: #757575;
}


/* ul inside content area*/

.nav-w ul {
  margin-left: 0px;
  list-style-type: none;
  margin-bottom: 0px;
}

.nav-w ul li {
  /*padding-left: 10px;*/
  text-transform: uppercase;
  position: relative;
  width: 100%;
}


/* ol inside content area*/

.nav-w>ul {
  padding-left: 0px;
  padding-right: 0px;
}

.nav-w ul>li ul {
  padding-left: 0px;
  padding-right: 0px;
  display: none;
}

.active-menu {
  color: red !important;
}

.nav-w>ul li::after {
  text-transform: uppercase;
  content: "+";
  position: absolute;
  left: 15px;
  top: 4px;
  line-height: 30px;
  font-size: 20px;
  z-index: 0;
}

.nav-w>ul li ul li::after {
  text-transform: uppercase;
  content: "";
  position: absolute;
  left: 0px;
  top: 5px;
  line-height: 32px;
  font-size: 20px;
  z-index: 0;
}

.nav-w ul li ul li a {
  padding-left: 45px;
}

.nav-w a:hover {
  background: #f5f5f5;
  border-left: 2px solid #178B43;
}

<div class="nav-w">

  <ul class="">
    <li><a href="#" style="cursor: default;">Share Information</a>
      <ul class="" style="display: none;">
        <li><a href="/investor-relations/share-nformations/share-overview/">Share Overview</a></li>
        <li><a href="/investor-relations/share-nformations/share-graph/">Share Graph </a></li>
        <li><a href="/investor-relations/share-nformations/investor-calculator/">Investement Calculator</a></li>
        <li><a href="/investor-relations/share-nformations/share-prices/">Historical Share Prices</a></li>
      </ul>
    </li>
    <li><a href="#" style="cursor: default;">Financial Information</a>
      <ul class="" style="display: none;">
        <li><a href="/investor-relations/financial-information/earning-releases/">Earning Releases</a></li>
        <li><a href="/investor-relations/financial-information/financial-statements/">Financial Statements</a></li>
        <li><a href="/investor-relations/financial-information/presentation">Presentation
</a></li>
        <li><a href="/investor-relations/financial-information/quarterly-key-figures">Quarterly Key Figures
</a></li>
        <li><a href="/investor-relations/financial-information/annual-key-figures">Annual Key Figures
</a></li>
      </ul>
    </li>

  </ul>
</div>

Answer 1

更正了您的脚本

$('.nav-w ul li').each(function() {
  if ($(this).hasClass('active-menu')) {
    $(this).parents("ul").css('display', 'block');
  }
})

$('.nav-w ul li')将返回元素数组，您将需要对其进行运行循环以找到活动元素，然后打开其父元素。

我已将active-menu类手动添加到li下面以测试代码。

<li class="active-menu"><a href="{...}">Earning Releases</a></li>

$(".nav-w > ul > li > a").click(function() {
  $(this).next().slideToggle();
});


//open active list
$('.nav-w ul li').each(function() {
  if ($(this).hasClass('active-menu')) {
    $(this).parents("ul").css('display', 'block');
  }
})


// compare url with nav url to show active url 
$(function() {
  //var url = window.location.href;
  var url = window.location.pathname;
  var pgurl = window.location.href.substr(
    window.location.href.lastIndexOf("/") + 1
  );
  $(".nav-w ul li a").each(function() {
    if ($(this).attr("href") == url || $(this).attr("href") == "") {
      $(this).addClass("active-menu");
    }
  });

  console.log("url : " + window.location.pathname);
});

.nav-w a {
  color: black;
  padding: 10px 15px;
  padding-left: 35px;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #f1f1f1;
  font-size: 12px;
  font-weight: 600;
  /* color: #178B43 !important; */
  color: #757575;
}


/* ul inside content area*/

.nav-w ul {
  margin-left: 0px;
  list-style-type: none;
  margin-bottom: 0px;
}

.nav-w ul li {
  /*padding-left: 10px;*/
  text-transform: uppercase;
  position: relative;
  width: 100%;
}


/* ol inside content area*/

.nav-w>ul {
  padding-left: 0px;
  padding-right: 0px;
}

.nav-w ul>li ul {
  padding-left: 0px;
  padding-right: 0px;
  display: none;
}

.active-menu {
  color: red !important;
}

.nav-w>ul li::after {
  text-transform: uppercase;
  content: "+";
  position: absolute;
  left: 15px;
  top: 4px;
  line-height: 30px;
  font-size: 20px;
  z-index: 0;
}

.nav-w>ul li ul li::after {
  text-transform: uppercase;
  content: "";
  position: absolute;
  left: 0px;
  top: 5px;
  line-height: 32px;
  font-size: 20px;
  z-index: 0;
}

.nav-w ul li ul li a {
  padding-left: 45px;
}

.nav-w a:hover {
  background: #f5f5f5;
  border-left: 2px solid #178B43;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-w">

  <ul class="">
    <li><a href="#" style="cursor: default;">Share Information</a>
      <ul class="" style="display: none;">
        <li><a href="/investor-relations/share-nformations/share-overview/">Share Overview</a></li>
        <li><a href="/investor-relations/share-nformations/share-graph/">Share Graph </a></li>
        <li><a href="/investor-relations/share-nformations/investor-calculator/">Investement Calculator</a></li>
        <li><a href="/investor-relations/share-nformations/share-prices/">Historical Share Prices</a></li>
      </ul>
    </li>
    <li><a href="#" style="cursor: default;">Financial Information</a>
      <ul class="" style="display: none;">
        <li class="active-menu"><a href="/investor-relations/financial-information/earning-releases/">Earning Releases</a></li>
        <li><a href="/investor-relations/financial-information/financial-statements/">Financial Statements</a></li>
        <li><a href="/investor-relations/financial-information/presentation">Presentation
</a></li>
        <li><a href="/investor-relations/financial-information/quarterly-key-figures">Quarterly Key Figures
</a></li>
        <li><a href="/investor-relations/financial-information/annual-key-figures">Annual Key Figures
</a></li>
      </ul>
    </li>

  </ul>
</div>

如果子项目在垂直列表中处于活动状态，请保持导航菜单处于打开状态

1 个答案: