Question

我在标题中有一个菜单，其中包含以下结构

＆＃13;

$(document).ready(function(){
	$('.dropdown').on('show.bs.dropdown', function(e){
		$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
	});
    $('.dropdown').on('hide.bs.dropdown', function(e){
    	$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
  	});

	$('#entrar').click(function(e){
	    $('#head').slideToggle();
    	$(".boton").css("display","none");
    	$("#secciones").slideToggle();
        $("#foot").slideToggle();
	});
    $('#entrar').click(function() {
     $('html, body').animate({
        scrollTop: $(".principal").offset().top + 70
     }, 700);
    });
});

$(document).ready(init);
	function init(){
    var sec = document.getElementById("secciones");
    var he = document.getElementById("head");
    var fo = document.getElementById("foot");
    he.style.display = "none";
    sec.style.display = "none";
    fo.style.display = "none";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="main_wrapper">
    <header id="head">
		<div class="container">
			<section class="row">
				<article class="col-xs-3">
					<h1 id="main_logo">
						<a href="index.php"><img src="images/logo.png" alt=""></a>
					</h1>
				</article>
				<article class="col-xs-9">
					<ul class="nav nav-pills" id="menu">
						<li class="active"><a href="index.php">INICIO</a></li>
						<li class="dropdown">
							<a class="dropdown-toggle" data-toggle="dropdown" href="#">MODELOS<span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a class="sec_index" href="index.php#galeria">Modelos en Panamá</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a class="dropdown-toggle" data-toggle="dropdown" href="#">BLOG<span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a class="sec_index" href="index.php#blog">Últimas Entradas</a></li>
								<li><a href="blog.php">Blog Chicas507</a></li>
								<li><a href="glosario.php">Glosario de Términos</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a class="dropdown-toggle" data-toggle="dropdown" href="#">ANÚNCIATE<span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a class="sec_index" href="index.php#paquetes">Paquetes</a></li>
								<li><a href="registro.php">Regístrate</a></li>
								<li><a href="recuperar.php">Recuperar Cuenta</a></li>
							</ul>
						</li>
						<li><a class="sec_index" href="index.php#contacto">CONTACTO</a></li>
						<li><a href="about.php">INFORMACIÓN</a></li>
						<li><a href="login.php">INGRESA</a></li>
					</ul>
				</article>
			</section>
		</div>
	</header>
    <section class="principal" id="principal">
			<div class="boton" id="entrar"><a href="#">ENTRAR</a></div>
			<div class="boton" id="salir"><a href="#">SALIR</a></div>
		</section>
	<section class="secciones" id="secciones">
      some sections
    </section>
    <footer id="foot">
    </footer>
  </div>
</body>

＆＃13;

我在网页上有各个部分，菜单中的一些链接将我带到索引中的部分，例如index＃models。一切都很好，但事情就是这样。我有一些JavaScript代码隐藏了部分和名为init的标题。我在身体中使用onload来调用该函数和一个按钮＆＃34; entrar＆＃34;显示。这是有效的，但每次重新加载页面时都会调用该函数，我想第一次运行并刷新页面。一切都在显示而不点击按钮。此外，当我更改到网站的其他部分时，我不想加载。例如，如果我进入博客，然后我点击回家，该功能加载，我必须点击＆＃34; entrar＆＃34;再次。我不想要那个。

我一直试图解决这个问题，但我无法找到解决方案。我感谢您的帮助。请！

Answer 1

您可以使用HTML5 webstorage。

    if (typeof(Storage) !== "undefined")
    {
        console.log("Your browser doesn't support webstorage");
    } 
    else if (sessionStorage.getItem("ui_flag") === null) // Check if the key is set. It's a self defined key.
    {
        sessionStorage.setItem("ui_flag", 1); // If not set, set it
        $(document).ready(init); // Now call your init function here. This code will execute only once for a window.
    }
    else
    {
        //No Action. It's not the first time.
    }

Answer 2

如果您希望在浏览器关闭后保留localStorage var，则可以设置它：

$(function() {
    var visited = localStorage['visited'];
    if (!visited) {
       init();
       localStorage['visited'] = true;
    }

    function init() {
        var sec = document.getElementById("secciones");
        var he = document.getElementById("head");
        var fo = document.getElementById("foot");
        he.style.display = "none";
        sec.style.display = "none";
        fo.style.display = "none";
    }
});

或者如果您希望在浏览器关闭后发生sessionStorage：

$(function() {
    var visited = sessionStorage['visited'];
    if (!visited) {
       init();
       sessionStorage['visited'] = true;
    }

    function init() {
        var sec = document.getElementById("secciones");
        var he = document.getElementById("head");
        var fo = document.getElementById("foot");
        he.style.display = "none";
        sec.style.display = "none";
        fo.style.display = "none";
    }
});

Answer 3

我会选择一个cookie，用于存储一个小值，只需检查它是否存在。

结合CSS，您可以获得一个小巧而有效的解决方案。

使用下面的CSS / JS，当页面第一次加载时会创建cookie，第二次将loadedonce添加到html元素，然后CSS启动，显示隐藏元素

只需将cookie的创建移动到按钮点击，它就会在点击该按钮后显示它们。

由于Cookie无法在Stack代码段中使用，因此我使用您的代码制作了fiddle demo

CSS

#secciones, #head, #foot, .loadedonce .boton {
  display: none;
}
.loadedonce #secciones, .loadedonce #head, .loadedonce #foot {
  display: block;
}

JS如果在加载时（在js文件的头部或开头）

(function(d) {
  if (document.cookie.indexOf("loadedonce=yes") < 0) {
    document.cookie = "loadedonce=yes; expires=Thu, 31 Dec 2099 12:00:00 UTC; path=/";      
  } else {
    d.classList.add('loadedonce');    
  }
})(document.documentElement);

JS如果点击

(function(d) {
  if (document.cookie.indexOf("loadedonce=yes") >= 0) {
    d.classList.add('loadedonce');    
  }
})(document.documentElement);


$('#entrar').click(function() {
    document.cookie = "loadedonce=yes; expires=Thu, 31 Dec 2099 12:00:00 UTC; path=/";      
});

首次执行函数onload

3 个答案: