2016-05-12 11 views
0

私はJavascriptを初めて使い、永続的なトグルで苦労しています。JQuery persistent toggle div

ここで概要を説明しているコードを変更しようとしていますToggle DIV state localstorage ローカルストレージ変数が定義されていません。

HTML

<div class="oo-adv-search"> 
    <a id='hideshow' value='hide/show'>advanced search</a> 
</div> 
<div id="adv_search" class="oo-adv-search-box"> 
    search box content 
</div> 

CSS

.oo-adv-search { 
    font-size: 12px; 
    font-family: 'Roboto'; 
    width: 200px; 
    font-weight: 300; 
    color: #000; 
    cursor: pointer; 
    text-align: left; 
    padding: 0px; 
} 

.oo-adv-search-box { 
    display:none; 
} 

JScriptの

$(document).ready(function(){ 
    var opened = window.localStorage.getItem('opened'); 

    $('.oo-adv-search-box').hide(); 
     if(opened !== ''){ 
      $('#' + opened).find('.oo-adv-search-box').show(); 
     } 

    $('.oo-adv-search').on('click', function(event) { 
     $(this).next(".oo-adv-search-box").slideToggle(500); 
     var id = $(this).parent().attr('id'); 
     window.localStorage.setItem('opened', id); 
    }); 
}); 

ここに私のjsfiddleです:https://jsfiddle.net/woodbine/0krzr949/

+0

あなたは 'あなたのフィドルでjquery'ファイルを含めるのを忘れていました。 – Bhumika107

+0

jQueryを組み込んでおらず、 '$(this).parent()。attr( 'id')'を使って存在しない要素に移動しているので、 'this'はあなたのHTMLサンプルに親を持たない' .oo-adv-search'です。したがって、 'id'は常に未定義です。 –

+0

お詫び申し上げます。 jQueryが追加されました。 – woodbine

答えて

0

私はあなたのフィドルを見ていると私はあなたが単純にしたい理解してt高度な検索divのoggle可視性、これのためのlocalStorageにフラグを設定する必要はありません、要素が表示されているかどうかを確認してください。

$("#hideshow").on('click',function() { 
    if($("#adv_search").is(":visible")) { // hide div if visible 
     $("#adv_search").hide(); 
    } else { 
     $("#adv_search").show(); // if not visible show 
    } 
}); 

Fiddle

+0

私は永続的なトグルが必要なので、ページの読み込み後にそこにとどまっていなければなりません。 – woodbine

+0

@ woodbineなぜあなたはlocalStorageをインクルードするのですか? –

+0

はいです。変数を設定するためにローカルストレージが必要です。次のページに検索結果とともに高度な検索オプションを表示することができます。 – woodbine