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在一个范围内输出活动选择器类，并根据从代码中可以看到的level，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');
    }
  });
});

但它只是不能用作手风琴，请在这里看到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/小提琴

另外，我如何让小提琴自动打开比例是链接被选中，第一级lis将是实际链接到web内容，而不是dummys

干杯

Answer 1

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

$('#amenu > li > a')

但在你的HTML中，锚链接是第二个孩子

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

此外，您的方法无法检查活动类，但您可以通过hasClass函数进行检查。

看看这个小提琴是否适合你

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

Answer 2

您是否期望得到以下结果？请查看以下链接。

http://jsfiddle.net/EKe2R/11/

只有js代码发生了变化。

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

Answer 3

使用此...

  $('.currentbranch0').on('click', function(){
       $(this).next().slideToggle('slow');
  });

并查看此jSfiddle Example

由于CMS输出，JQuery Accordion问题

3 个答案: