Question

我在页面的左侧有一个垂直堆叠的手风琴式菜单。它有效，但我不认为它对用户来说非常直观，所以我想改进它。

HTML

<ul class="leftnav">
  <li><a href="#">South of France</a>
    <ul>
      <li><a href="/hotels.php?tag=South of France">South of France</a></li>
      <li><a href="/hotels.php?tag=Provence">Provence</a></li>
      <li><a href="/hotels.php?tag=Languedoc">Languedoc</a></li>
    </ul>
  </li>
  <li><a href="#">South-West France</a>
    <ul>
etc

和javascript是

  $('.leftnav > li > a').click(function(){
      $(this).next().slideToggle(1200);
  });

用户必须单击“法国南部”菜单按钮才能打开手风琴，然后再次单击第二级菜单以进入所需页面。如果他（如）在“巴黎”页面上，他点击“法国南部”，但最初发现自己仍然在巴黎页面上。

我希望它能像这样工作：点击“法国南部”菜单按钮手风琴打开然后打开法国南部页面，仍然打开手风琴

然后，如果用户想要进一步缩小搜索范围，可以点击普罗旺斯或朗格多克。

我用document.getElementById（'south'）尝试过各种各样的东西.Click（）;等等，但没有达到我想要的目的。

EDIT 我试图遵循Blowski的建议，没有成功。看似合理，但我显然做的事情不对。

我现在为我的HTML

了

<ul class="leftnav">
  <li><a href="/hotels.php?tag=South of France">South of France</a>
    <ul>
      <li><a href="/hotels.php?tag=Provence">Provence</a></li>
      <li><a href="/hotels.php?tag=Languedoc">Languedoc</a></li>
    </ul>
  </li>
  <li><a href="#">South-West France</a>
    <ul>
etc

这适用于javascript

  $('.leftnav > li > a').click(function(){
      $(this).next().slideToggle(1200);
      $(this).addClass('open');
  });
  if ($('.leftnav > li > a').attr('class') == 'open'){
      $(this).next().slideDown(1200);
  };

第二次编辑 EdenSource提供的解决方案工作（谢谢！）稍作修改。由于解决方案依赖于菜单第二级上与第一级相同的url参数，我必须将其包含在内，然后使用display：none隐藏它。

<ul class="leftnav">
  <li><a href="/hotels.php?tag=South of France">South of France</a>
    <ul>
      <li style="display:none"><a href="tag=South of France"></a></li>
      <li><a href="/hotels.php?tag=Provence">Provence</a></li>
      <li><a href="/hotels.php?tag=Provence">Cote d'Azure</a></li>
      <li><a href="/hotels.php?tag=Languedoc">Languedoc</a></li>
    </ul>
etc

我还必须将javascript中的变量减少到参数的值。我用split（）和pop（）做了这个。

var param = window.location.search.substr(1).split('=');
param = param.pop();
param = param.replace(/%20/g, " ");

$(".leftnav li ul li a").each(function(){
    var getHref = $(this).attr("href").split('=');
    getHref = getHref.pop();
    if(getHref == param){
        $(this).addClass("subActiv");
        $(this).closest("ul").slideDown(1200).closest("li").children().first().addClass("navActiv");    
    }
});

现在唯一的问题是slideDown相当不稳定，但我知道这是一个常见的问题，并且有很多关于它的线程。希望其中一个能给我带来解决方案。

Answer 1

将一个类添加到手风琴中的打开选项卡，并在服务器端设置该类生成代码，或者在页面加载时在JavaScript中执行某些操作。

Answer 2

由于href attribut，您可以尝试确定我们在哪个子菜单页面：

var myUrl = document.location.pathname;

$(document).on("click", ".leftnav > li", function(){
    $("ul", this).slideToggle(500);
});

$(".leftnav li ul li a").each(function(){
    var getHref = $(this).attr("href");

    if(getHref == myUrl){
        $(this).addClass("subActiv");
        $(this).closest("ul").slideToggle(500).closest("li").children().first().addClass("navActiv");    
    }
});

Live Demo

在小提琴中，我强迫网址等于"/hotels.php?tag=Languedoc"

jQuery Accordion Menu将在下一页打开

2 个答案: