在页面加载时打开特定的嵌套UL元素

时间:2017-06-10 21:19:32

标签: javascript jquery html css

这是JSFiddle

我创建了一个非常简单的“归档树”,它使用嵌套的UL和LI来浏览数年,数月和数天。目前,我有一个问题需要解决:

如果您点击指向另一个页面的任何一天链接,我希望整个过程保持开放至该月。 (例如,对于导航栏元素具有“活动”类,仅在这种情况下,UL元素将在该页面的新页面上显示为块,就像之前已打开过一样。我尝试添加一个将类显示为块,但它不会改变(参见JSFiddle)。

{{1}}

1 个答案:

答案 0 :(得分:1)

您可以为每个链接添加data属性,然后设置localStorage项目,其中包含最后一个链接的值。在页面加载时,如果设置了localStorage项,则显示该元素并遍历DOM并显示父项。

由于这不会在SO的沙箱中工作,所以这是一个小提琴。 https://jsfiddle.net/pppL1rwx/4/



if (localStorage.lastClicked) {
  $('[data-id="' + localStorage.lastClicked + '"]').parentsUntil('.parent').each(function() {
    $(this).siblings().addBack().slideDown();
  });
}

$('.year-button, .month-button').click(function(e) {
  e.stopPropagation();
  $(this).children('ul').slideToggle();
  var clicked = e.target.getAttribute('data-id');
  if (clicked) {
    localStorage.lastClicked = clicked;
  }
});

.navbutton {
  -webkit-appearance: none;
  background-color: #cfa9db;
  border: none;
  color: white;
  padding: 9px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width: 100%;
  font-weight: bold;
  transition: all 0.2s ease 0s;
}

.navbuttoninner {
  -webkit-appearance: none;
  background-color: #cfa9db;
  border: none;
  color: white;
  padding: 9px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width: 290px;
  font-weight: bold;
  transition: all 0.2s ease 0s;
}

.archive_year {
  font-size: large;
  font-weight: bold;
  cursor: pointer;
  list-style: none;
}

.archive_month {
  list-style: none;
  font-weight: normal;
  cursor: pointer;
}

.archive_dayList {
  margin-left: 32px;
  list-style: none;
  font-weight: normal;
  cursor: pointer;
}

.month-button {
  padding-top: 6px;
}

.archive_day {
  padding-top: 6px;
}

.archive_month,
.archive_dayList {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <ul class="archive_year">
    <li class="year-button">
      <button class="navbutton">2017</button>
      <ul class="archive_month">
        <li class="month-button">
          <button class="navbuttoninner">June</button>
          <ul class="archive_dayList">
            <li class="archive_day"><a href="#" data-id="link1">Test link</a></li>
            <li class="archive_day"><a href="#" data-id="link2">Test link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="archive_month">
        <li class="month-button">
          <button class="navbuttoninner">July</button>
          <ul class="archive_dayList">
            <li class="archive_day"><a href="#" data-id="link3">Test link</a></li>
            <li class="archive_day"><a href="#" data-id="link4">Test link</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
&#13;
&#13;
&#13;