javascript - 由于 CMS 输出导致的 JQuery Accordion 问题

Question

由于我使用的 CMS 输出导航项的方式，我遇到了问题。我之前问过这个问题并且收到了一个应该有效的解决方案但是由于 JS 不是我的强项我不明白。一个简短的背景。我的 CMS 输出如下菜单项:

<ul id="amenu">
    <li><a href="#">Home</a></li><li><span class="currentbranch0">
        <a href="">Content</a></span>
        <ul class="multilevel-linkul-0" title="">
            <li><a href="">Content 2</a></li>
            <li><span class="currentbranch1"><a href="">Content 3</a></span></li>
        </ul>
    </li>
</ul>

问题出在哪里？好吧，CMS 在一个范围内输出事件选择器类，并根据级别递增它，从代码中可以看出 currentbranchN。

我在另一个线程上得到了帮助，我们已经走到这一步了:

$(document).ready(function () {
  $('#amenu > li > a').click(function(){
    if ($(this).closest("span[class*='currentbranch']").attr('class') != 'active'){
      $('#amenu li ul').slideUp();
      $(this).next().slideToggle();
      $('#amenu li a').closest("span[class*='currentbranch']").removeClass('active');
      $(this).closest("span[class*='currentbranch']").addClass('active');
    }
  });
});

但它不能用作 Accordion ，请在此处查看 JSFiddle:http://jsfiddle.net/EKe2R/5/ .我估计我已经接近让它工作了，但是由于我的 JS 技能充其量只是基本技能，所以我似乎无法理解它。我基本上需要展开菜单(如果选择了二级项目)并使用 CMS 输出的导航项目突出显示事件对象 currentbranch1。

谢谢! :)

尼克

编辑:补充一下， Accordion 不起作用的主要问题是，即使对于第二级，CMS 也会为第一级输出，导致代码失败

<span class="currentbranch0"></span>

编辑::

我将尝试对向下滑动的东西进行硬编码，这是我尝试过但失败的代码:

$(document).ready(function () {
  $('#amenu > li > a,#amenu > li > span > a').click(function(){
      //alert($(this).closest("span[class='currentbranch0']").attr('class'));
    if ($(this).closest("span[class='currentbranch0']").attr('class') != 'active'){
      $('#amenu li ul').slideUp();
      $(this).parents('li').children('ul').slideDown();
      $('#amenu li a').closest("span[class='currentbranch0']").removeClass('active');
      $(this).closest("span[class='currentbranch0']").addClass('active');
    }
  });
}); 

http://jsfiddle.net/GgKyV/1/在这里摆弄

另外，如何让 fiddle 自动打开 Accordion 是选择了链接，第一级 lis 将是指向 Web 内容的实际链接，而不是虚拟链接

干杯

Answer 1

您正在选择 anchor 链接，它是 li 元素的第一个子元素

$('#amenu > li > a')

但在您的 HTML 中， anchor 链接是第二个 child

<li><span class="currentbranch1"><a href="">Content 3</a></span></li>

此外，您的方法无法检查事件类，但您可以通过 hasClass 函数检查它。

看看这个 fiddle 是否适合你

http://jsfiddle.net/fdcd6/1/