1. ホーム
  2. 質問と答え
  3. 実行機能はオンロード初回のみ

実行機能はオンロード初回のみ

2016-11-02 15 views
1

が、私は次のような構造実行機能はオンロード初回のみ

$(document).ready(function(){ 
 
\t $('.dropdown').on('show.bs.dropdown', function(e){ 
 
\t \t $(this).find('.dropdown-menu').first().stop(true, true).slideDown(); 
 
\t }); 
 
    $('.dropdown').on('hide.bs.dropdown', function(e){ 
 
    \t $(this).find('.dropdown-menu').first().stop(true, true).slideUp(); 
 
    \t }); 
 

 
\t $('#entrar').click(function(e){ 
 
\t  $('#head').slideToggle(); 
 
    \t $(".boton").css("display","none"); 
 
    \t $("#secciones").slideToggle(); 
 
     $("#foot").slideToggle(); 
 
\t }); 
 
    $('#entrar').click(function() { 
 
    $('html, body').animate({ 
 
     scrollTop: $(".principal").offset().top + 70 
 
    }, 700); 
 
    }); 
 
}); 
 

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

でヘッダー内のメニューを持っていると私は、Webページ内のさまざまなセクションを持って、メニューからのリンクの一部は、取得します私はインデックスのセクションに、例えばindex＃モデルのように。すべてうまく動作しますが、ここには問題があります。セクションを隠すJavaScriptコードと、initというヘッダーがあります。私は体内でonloadを使用して関数を呼び出し、ボタン "entrar"を表示します。これは機能しますが、関数はページをリロードするたびに呼び出され、最初に実行したいときとページが更新されたときに実行します。ボタンをクリックせずにすべてが表示されます。また、私はサイトの別の部分に変更するときに読み込みたくありません。たとえば、ブログに入り、家に帰るためにクリックすると、関数がロードされ、もう一度「entrar」をクリックする必要があります。私はそれを望んでいない。

私はこれを修正しようとしていますが、解決策を見つけることができません。私はあなたの助けに感謝します。お願いします！

出典

2016-11-02 Alexander Pulido

+0

あなたが探しているのはログイン機能だと思います。 –

+0

なぜあなたはCSSがあなたのためにできる何かを行うためにJavaScriptを使用していますか？許されている、それはメニューを表示するかどうかをチェックするために何かサーバー側を持っている必要がありますが、うん...メニュー項目を表示/非表示にJavaScriptを使用すると、悪い設計であり、避ける必要があります。 – junkfoodjunkie

+0

それはそうではありません。もし私がCSSだけで行うならば、ページがロードされるたびに、CSSはそれをいつ行うべきかを制御するためにjavascriptを使って行うアイデアが適用されます。 –

答えて

1

あなたはブラウザが閉じた後、それが持続する場合は、の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"; 
    } 
});
を

出典

2016-11-02 18:45:16

+0

これは完璧に機能します！どうもありがとう –

2

HTML5ウェブストレージを利用できます。

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. 
    }

出典

2016-11-02 18:28:34

0

私はクッキーを持っています。クッキーは小さな値を保存するためのもので、その存在を確認するだけです。

CSSと組み合わせると、小さく効率的なソリューションが得られます。単にによって隠さ要素

を示すことはクッキーを作成するページが読み込ま初めてCSS/JS、下に、二度目はhtml要素にloadedonceを追加し、CSSがでキックして

、クッキーの作成をボタンクリックに移動すると、そのボタンがクリックされた後にのみ表示されます。

クッキーは、スタックスニペットでは動作しませんので、負荷に（頭の中でまたはの初めのいずれかであれば、私はあなたのコード

CSS

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

JSでfiddle demoを作りましたあなたの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=/";  
});

出典

2016-11-02 19:12:02 LGSon

関連する問題

 関連する問題