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

你应该这样写：

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

Answer 2

这个shoudl工作，你的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 3

目前看来你的路径名看起来像： “/2012/products/grills/propane_grills.php”是否正确？

经过一些澄清后，您似乎可能想尝试这样的事情：

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

我认为location.pathname没有给你完整的网址。

好的，这是jsfiddle的解决方案...... http://jsfiddle.net/AMkVT/

希望这有帮助，我从你现有的网站上获取了html并包含了jquery。

jQuery手风琴菜单导航

3 个答案: