Question

点击ul时，我使用jquery切换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>

下面实际上是我生成html的phtml：

    <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的{{1}}保持打开状态。

Answer 1

嗯... 这是一个有趣的问题： - ）

解决方案背后的想法是找到a href等于当前页面网址，然后在页面加载时显示它的父ul。

缺点是您不能使用about.html之类的相对网址，而是需要使用绝对网址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>

更新：使用Cookie记住点击的li索引并在页面加载后打开相关

这种新方法使用cookie来记住单击列表项的索引，然后在重新加载后显示它...

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

});

如何在页面重新加载后保持切换内容保持打开状态？

1 个答案: