jQuery手风琴菜单导航

我不熟悉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（）

最初是

$（“#菜单ul:first”）.show（）

并在展开第一个菜单部分的情况下启动页面，效果良好。我做错了什么？我该如何修复它？

你应该这样写：

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

---

在这项工作中，您的HTML中有一些错误，JS中有一些逻辑错误：

这将把菜单变成一个jQuery UI手风琴菜单，然后根据URL位置自动将其打开到该菜单项

---

不过，您需要jQuery UI。

目前，您的路径名看起来像： “/2012/products/grills/poropan_grills.php”正确吗

经过一些澄清后，您可能想尝试以下内容：

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

我不认为location.pathname提供了完整的url

好的，这是关于JSFIDLE的解决方案。。。

---

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

让我澄清一下，我想搜索ul下id=sub与当前url匹配的li的href值。然后导航到id=sub的父级，并在菜单中显示ul。我继续并根据您的评论更新了我的答案。非常确定window.location.pathname没有提供您想要的结果。一直在靠近，但是.show没有显示任何ul。是

.parent（'#sub'）没有像

$（'#菜单ul:first'）一样选择ul。show（）；`是吗？你看到JSFIDLE了吗？这应该是你问题的解决方案？我改变了#sub->.sub。你不应该使用id-like类。它会在某个时候赶上使用。谢谢！它的工作和美丽！为什么父母工作而不是父母？我只是想选择一个ul，而不是所有ul的class=sub？您可能会尝试使用API方法

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

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