Wie kann der Inhalt der Umschaltfunktion auch nach dem erneuten Laden der Seite geöffnet bleiben?

Question

Ich benutze eine jquery, um eine ul umschalten, wenn li angeklickt wird. Ich komme so vor, wie ich es erwarte. Aber wie ich einen Anker a Tag für li Tag gegeben habe, wenn der li angeklickt wird, lädt er neu und öffnet die url, die in der Ankermarke erwähnt wird. So wird die ul, die mit toggle geöffnet wurde automatisch geschlossen.

Mein jquery Schnipsel ist:

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

}); 
</script> 

Mein html ist:

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

Below eigentlich mein phtml ist, von wo aus das HTML generiert:

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

ich behalten wollen Die ul der ausgewählten li bleibt offen, auch wenn die Seite reloa ist ded oder aktualisiert. Hmm

Answer 1

... Das ist eine interessante Frage :-)

Die Idee hinter der Lösung a mit href gleich der aktuellen Seite URL zu finden ist, dann zeigen, es ist Eltern ul auf Seite laden.

Der Nachteil ist, dass man nicht relativ Urls wie about.html verwenden können, stattdessen müssen Sie http://example.com/about.html absolute URLs verwenden, wo http://example.com URL zu Ihrer Website;)

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>

AKTUALISIERT : Verwendet Cookies, um an den Index von li angeklickt und öffnen Sie nach dem Laden der Seite relevant

Dieser neue Ansatz verwendet Cookies den Index der Listeneintrag angeklickt zu erinnern, zeigt es dann nach dem Neuladen ...

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(); 
    } 
    } 

});