Question

我将SlideUp和SlideDown jquery动画添加到我的网站http://brianhotopp.duckdns.org/index.html（点击＆gt;＆gt;＆gt;）但是，当用户导航到新页面时，他们必须重新滑动元素他们在最后一页上滑了下来。在导航之前有没有办法检测元素是否可见？

$(function(){ 
if (sessionStorage.getItem("tabvisible")) {
$(".jumbotron").slideDown();//display header
} else {
$("jumbotron").slideUp();//hide header
}

$('.information').hide().fadeIn('slow');


$("#expandiconup").click(function(){
$(".jumbotron").slideUp();
 sessionStorage.setItem("tabvisible", false);
});
$("#expandicondown").click(function(){
$(".jumbotron").slideDown();
sessionStorage.setItem("tabvisible", true);

});

Answer 1

用JavaScript做这件事并不容易，而且我确信有更好的方法可以完成，而不是我要告诉你的。但如果我是你，我会调查一个像Angular这样的前端框架来处理你的观点，这样你的标题就不会被重新加载，状态会在整个页面中持续存在。

无论如何，要真正解决这个问题，你可以使用CSS :target伪选择器和一些JavaScript。基本上，每当你点击你的'＃34; show＆＃34;链接您将使用JavaScript将哈希附加到导航中的每个网址。这样，当他们点击它们时，加载的新页面将在其末尾有一个哈希值。然后，如果该哈希匹配页面上元素的ID（在这种情况下它将是您显示/隐藏的内容），则可以使用CSS :target伪选择器来隐藏（{{1那个元素。

这是一个简单的例子（我在CodePen中进行了设置，但如果没有链接的实际HTML页面，很难演示）：

<强> HTML

display: none

<强> CSS

<header>
  <p class="header-content" id="headerHidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac orci eros. Nunc ultrices augue in suscipit pulvinar. Morbi eget tempus sem, eget lobortis enim. Fusce scelerisque odio vel lorem ullamcorper tincidunt. Pellentesque accumsan lobortis imperdiet. Donec pharetra id enim et vestibulum. Nunc pulvinar, diam et condimentum accumsan, lacus libero sagittis erat, a accumsan risus justo nec quam. Maecenas quis accumsan velit. Suspendisse porttitor velit nec ipsum bibendum elementum. Aenean feugiat non nisi a eleifend.</p>

  <a href="#" class="hide-header-content">Hide header content</a>

  <a href="#" class="show-header-content">Show header content</a>

  <nav>
    <ul>
      <li><a href="/link1">Link 1</a>
      <li><a href="/link2">Link 2</a>
      <li><a href="/link3">Link 3</a>
      <li><a href="/link4">Link 4</a>
      <li><a href="/link5">Link 5</a>
    </ul>
  </nav>
</header>

JavaScript（使用jQuery）

#headerHidden:target {
  display: none;
}

这对你的问题来说真的是一种破解方式，但这听起来像是一个我想要解决的有趣问题。使用这种方法，您可能会遇到浏览器问题＆＃34;跳跃＆＃34;到ID与URL中的哈希值匹配的元素。在您的情况下，由于它位于页面顶部，因此不应该成为问题。

最后，我知道我的标记并不完全属于你，但我希望你至少可以抓住我的漂移并选择一些在这里有用的东西！

Answer 2

如何使用localStorage ??

$("#expandiconup").click(function () {
    localStorage.setItem("tabvisible", false);
});

$("#expandicondown").click(function () {
    localStorage.setItem("tabvisible", true);
});

然后在加载新页面时，验证此值

if (localStorage.getItem("tabvisible") == true) {
    //display header
} else {
    //hide header
}

如何在导航前判断元素是否在屏幕上？

2 个答案: