Как сохранить содержимое переключателя открытым даже после перезагрузки страницы?

Question

Я использую jquery для переключения ul, когда нажата кнопка li. Я бываю так, как я ожидаю. Но поскольку я дал привязку a тег для li при щелчке по адресу li Он перезагружает и открывает url, упомянутый в теге привязки. Таким образом, ul, который был открыт с помощью toggle, автоматически закрывается.

Мой JQuery Фрагмент кода:

<script> 
var $j = jQuery.noConflict(); 
$j(function() { 
    $j('li.level1').click(function() { 
    $j('ul.level1:visible').hide(); 
    $j('ul.level1', this).toggle(); 
    }); 

}); 
</script> 

Мой HTML является:

<ul class="level0"> 
<li class="level1"> 
    <a href="#">Toggle</a> 
    <ul class="level1" style="display:none;"> 
    <li class="level2"><a href="http://127.0.0.1/magento_1.9.2.4/collection/shop-by-collection.html">Level2</a></li> 
    <li class="level2"><a href="http://127.0.0.1/magento_1.9.2.4/collection/shop-by-feature.html">Level2</a></li> 
    <li class="level2"><a href="http://127.0.0.1/magento_1.9.2.4/collection/shop-all.html">Level2</a></li> 
    </ul> 
</li> 
<li class="level1"> 
    <a href="#">Toggle</a> 
    <ul class="level1" style="display:none;"> 
    <li class="level2"><a href="#">Level2</a></li> 
    <li class="level2"><a href="#">Level2</a></li> 
    <li class="level2"><a href="#">Level2</a></li> 
    </ul> 
</li> 
<li class="level1"> 
    <a href="#">Toggle</a> 
    <ul class="level1" style="display:none;"> 
    <li class="level2"><a href="#">Level2</a></li> 
    <li class="level2"><a href="#">Level2</a></li> 
    <li class="level2"><a href="#">Level2</a></li> 
    </ul> 
</li> 
</ul> 

Ниже на самом деле мой PHTML откуда генерируется HTML:

<ul class="level0"> 
<?php foreach ($cats as $cat): ?> 
<li class="level1"> 
<a href= "<?php echo $_helper->getCategoryUrl($cat) ?>" > 
    <?php echo $cat->getName() ?> 
    </a> 
    <?php $_category = Mage::getModel('catalog/category')->load($cat->getId()) ?> 
       <?php $_subcategories = $_category->getChildrenCategories() ?> 
       <?php if (count($_subcategories) > 0): ?> 

        <ul class="level1" style="display:none;"> 
         <?php foreach($_subcategories as $_subcategory): ?> 
          <li class="level2"> 
           <a href="<?php echo $_helper->getCategoryUrl($_subcategory) ?>"> 
            <?php echo $_subcategory->getName() ?> 
           </a> 
          </li> 
         <?php endforeach; ?> 
        </ul> 

       <?php endif; ?> 
</li> 

<?php endforeach; ?> 
</ul> 

Я хочу, чтобы ul выбранных li, которые должны быть открыты, даже если страница reloa или обновлен.

Answer 1

Хм ... Это интересный вопрос :-)

Идея решения состоит в нахождении a с href равным текущей страницы URL, а затем показать его родителей ul на странице загрузки.

Недостатком является то, что вы не можете использовать относительные URL, как about.html, вместо этого вы должны использовать абсолютные URL'ы http://example.com/about.html где http://example.com является гиперссылка на ваш сайт;)

var $j = jQuery.noConflict(); 
 
$j(function() { 
 
    $j('li.level1').click(function() { 
 
    $j('ul.level1:visible').hide(); 
 
    $j('ul.level1', this).toggle(); 
 
    }); 
 
    $j('ul.level0 a[href="' + window.location.href + '"]').parents('ul.level1').show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="level0"> 
 
<li class="level1"> 
 
    <a href="#">Toggle</a> 
 
    <ul class="level1" style="display:none;"> 
 
    <li class="level2"><a href="#">Level2</a></li> 
 
    <li class="level2"><a href="#">Level2</a></li> 
 
    <li class="level2"><a href="#">Level2</a></li> 
 
    </ul> 
 
</li> 
 
<li class="level1"> 
 
    <a href="#">Toggle</a> 
 
    <ul class="level1" style="display:none;"> 
 
    <li class="level2"><a href="?1">Level2</a></li> 
 
    <li class="level2"><a href="http://stacksnippets.net/js">Level2 This will be shown open because url matches ;-)</a></li> 
 
    <li class="level2"><a href="?3">Level2</a></li> 
 
    </ul> 
 
</li> 
 
<li class="level1"> 
 
    <a href="#">Toggle</a> 
 
    <ul class="level1" style="display:none;"> 
 
    <li class="level2"><a href="#">Level2</a></li> 
 
    <li class="level2"><a href="#">Level2</a></li> 
 
    <li class="level2"><a href="#">Level2</a></li> 
 
    </ul> 
 
</li> 
 
</ul>

ОБНОВЛЕНО : Использует куки-файлы, чтобы запомнить индекс щелчка и открыть реле после загрузки страницы.

Этот новый подход использует куки, чтобы помнить индекс элемента списка щелкнул, а затем показывает его после перезагрузки ...

var $j = jQuery.noConflict(); 
$j(function() { 
    $j('li.level1').click(function() { 
    $j('ul.level1:visible').hide(); 
    $j('ul.level1', this).toggle(); 
    var i = $j(this).index('.level0 li.level1') 
    document.cookie = "currentlyOpenUl=" + i; 
    }); 

    var allcookies = document.cookie.split(';'); 

    // Now take key value pair out of this array 
    for (var i = 0; i < allcookies.length; i++) { 
    name = cookiearray[i].split('=')[0]; 
    value = cookiearray[i].split('=')[1]; 
    if ('currentlyOpenUl' == cookiearray[i].split('=')[0]) { 
     $j('.level0 li.level1').eq(cookiearray[i].split('=')[1]).click(); 
    } 
    } 

});