Навигация по аккордеонному меню jQuery

Question

Я новичок в jQuery. У меня есть меню для аккордеона, которое я пытаюсь настроить. Я хочу, чтобы меню отображало правильный раздел в зависимости от того, на какой странице вы находитесь. У меня есть то, что я думаю, должно работать:

function initiateMenu() {
var pathname = window.location;

$('#menu ul').hide();
$("a[href$='"+pathname+"']").parent('.sub').show();
$('#menu li a').click(
  function() {
    var checkElement = $(this).next();

    if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
      return false;
      }

    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
      $('#menu ul:visible').slideUp('normal');
      checkElement.slideDown('normal');
      return false;
      }
    }
  );
}

$(document).ready(function() {initiateMenu();});

HTML-код для меню:

                <ul id="menu">
                    <li><a href="#">New Products for 2012</a>
                        <ul class="sub">
                            <li><a href="http://www.jardencustom.com/2012/products/new.php">All New Products</a></li>
                            <li><a href="http://www.jardencustom.com/2012/products/backpacks.php">Backpacks</a></li>
                            <li><a href="http://www.jardencustom.com/2012/products/camping.php">Camping</a></li>
                            <li><a href="http://www.jardencustom.com/2012/products/coolers.php">Coolers</a></li>
                            <li><a href="http://www.jardencustom.com/2012/products/grills.php">Grills</a></li>
                            <li><a href="http://www.jardencustom.com/2012/products/knives.php">Knives</a></li>
                            <li><a href="http://www.jardencustom.com/2012/products/lanterns.php">Lanterns</a></li>
                            <li><a href="http://www.jardencustom.com/2012/products/sunglasses.php">Sunglasses</a></li>
                        </ul></li>
                    <li><a href=#">Backpacks</a>
                        <ul class="sub">
                            <li><a href="http://www.jardencustom.com/2012/products/backpacks/">All Backpacks</a></li>
                            <li><a href="http://www.jardencustom.com/2012/products/backpacks/traditional_backpacks.php">Traditonal Backpacks</a></li>
                            <li><a href="http://www.jardencustom.com/2012/products/backpacks/messenger_bags.php">Messenger Bags</a></li>
                        </ul></li>
                    <li><a href=" <?php echo $lu ; ?>#">Camping &amp; Home</a>
                        <ul class="sub">
                            <li><a href="http://www.jardencustom.com/2012/products/camping/">All Camping &amp; Home</a></li>
                            <li><a href="http://www.jardencustom.com/2012/products/camping/tables.php">Tables</a></li>
                            <li><a href="http://www.jardencustom.com/2012/products/camping/chairs.php">Chairs</a></li>
                            <li><a href="http://www.jardencustom.com/2012/products/camping/tents_shelters.php">Tents &amp; Shelters</a></li>
                            <li><a href="http://www.jardencustom.com/2012/products/camping/airbeds.php">Airbeds</a></li>
                            <li><a href="http://www.jardencustom.com/2012/products/camping/sleeping_bags.php">Sleeping Bags</a></li>
                            <li><a href="http://www.jardencustom.com/2012/products/camping/accessories.php">Accessories</a></li>
                        </ul></li>
                   </ul>

Строка $("a[href$='"+pathname+"']").parent('.sub').show(); изначально была $('#menu ul:first').show(); и отлично работала, чтобы начать страницу с раскрытым первым разделом меню. Что я делаю не так и как я могу это исправить?

Answer 1

Эта шоудль работает, у вас были некоторые ошибки в вашем HTML и логические ошибки в вашем JS: http://jsfiddle.net/khalifah/TBJYD/

<ul id="menu">
    <li>
        <a href="#">New Products for 2012</a>
        <ul class="sub">
            <li><a href="http://www.jardencustom.com/2012/products/new.php">All New Products</a></li>
            <li><a href="http://www.jardencustom.com/2012/products/backpacks.php">Backpacks</a></li>
            <li><a href="http://www.jardencustom.com/2012/products/camping.php">Camping</a></li>
            <li><a href="http://www.jardencustom.com/2012/products/coolers.php">Coolers</a></li>
            <li><a href="http://www.jardencustom.com/2012/products/grills.php">Grills</a></li>
            <li><a href="http://www.jardencustom.com/2012/products/knives.php">Knives</a></li>
            <li><a href="http://www.jardencustom.com/2012/products/lanterns.php">Lanterns</a></li>
            <li><a href="http://www.jardencustom.com/2012/products/sunglasses.php">Sunglasses</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Backpacks</a>
        <ul class="sub">
            <li><a href="http://www.jardencustom.com/2012/products/backpacks/">All Backpacks</a></li>
            <li><a href="http://www.jardencustom.com/2012/products/backpacks/traditional_backpacks.php">Traditonal Backpacks</a></li>
            <li><a href="http://www.jardencustom.com/2012/products/backpacks/messenger_bags.php">Messenger Bags</a></li>
        </ul>
    </li>
    <li>
        <a href="<?php echo $lu ; ?>#">Camping &amp; Home</a>
        <ul class="sub">
            <li><a href="http://www.jardencustom.com/2012/products/camping/">All Camping &amp; Home</a></li>
            <li><a href="http://www.jardencustom.com/2012/products/camping/tables.php">Tables</a></li>
            <li><a href="http://www.jardencustom.com/2012/products/camping/chairs.php">Chairs</a></li>
            <li><a href="http://www.jardencustom.com/2012/products/camping/tents_shelters.php">Tents &amp; Shelters</a></li>
            <li><a href="http://www.jardencustom.com/2012/products/camping/airbeds.php">Airbeds</a></li>
            <li><a href="http://www.jardencustom.com/2012/products/camping/sleeping_bags.php">Sleeping Bags</a></li>
            <li><a href="http://www.jardencustom.com/2012/products/camping/accessories.php">Accessories</a></li>
        </ul>
    </li>
</ul>

<script type="text/css">
    function initiateMenu()
    {
        var pathname = window.location.pathname;
        $( "#menu ul" ).hide();
        $( "#menu a[href='" + pathname + "']" ).parents( ".sub" ).show();
        $( "#menu li a" ).click(function() {
            var checkElement = $( this ).next();

            if ( (checkElement.is("ul") ) && (checkElement.is(":visible")) )
            {
                return false;
            }

            if ( (checkElement.is('ul')) && (!checkElement.is(':visible')) )
            {
                $( "#menu ul:visible" ).slideUp( "normal" );
                checkElement.slideDown( "normal" );
                return false;
            }
        });
    }

    $(document).ready(function() {
        //$( "#menu" ).accordion({ navigation: true });
        initiateMenu();
    });
</script>

Почему бы не использовать jQuery UI, я думаю, что вы хотите это:

$( document ).ready(function() {
    $( "#menu" ).accordion({ navigation: true });
});

Это превратит меню в аккордеонное меню jQuery UI, а затем на основе расположения URL автоматически откроет его для этого пункта меню.

Вам понадобится jQuery UI.

Answer 2

В настоящее время кажется, что ваш путь будет выглядеть примерно так: "/2012/products/grills/propane_grills.php" правильно?

После некоторого разъяснения, возможно, вы захотите попробовать что-то вроде этого:

var pathname = document.location;
$("a[href="+pathname+"]").parent('#sub').show();

Я не думаю, что location.pathname дал вам полный URL.

Хорошо, вот решение для jsfiddle ... http://jsfiddle.net/AMkVT/

Надеюсь, это поможет, я взял html с вашего существующего сайта и включил jquery.

Answer 3

вы должны написать это так:

$("a[href$='" + pathname + "']");