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

Question

这是 JSFiddle

我创建了一个非常简单的“文件树”，它使用嵌套的 UL 和 LI 来浏览年、月和日。目前，我有一个问题想解决:

如果您单击任何指向另一个页面的日期链接，我希望所有内容都对那个月保持打开状态。 (例如，就像导航栏元素有一个“事件”类一样，只有在这种情况下，UL 元素才会在该月的新页面上显示为一个 block ，就好像它之前已经打开过一样。我试过添加一个单独的类显示为一个 block ，但它不会改变(参见 JSFiddle)。

.month-active {
    display: block;
}

<ul class="archive_year">
    <li class="year-button"><button class="navbutton">key5</button>
        <ul class="archive_month">
            <li class="month-button"><button class="navbuttoninner">key53</button>
                <ul class="archive_dayList month-active">
                    <li class="archive_day"><a href="#">Test link</a></li>
                    <li class="archive_day"><a href="#">Test link</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Answer 1

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

因为这在 SO 的沙箱中不起作用，这里有一个 fiddle 。 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>