由于 CMS 输出导致的 JQuery Accordion 问题答案

【问题标题】：JQuery Accordion issue due to CMS output由于 CMS 输出导致的 JQuery Accordion 问题
【发布时间】：2013-02-27 12:01:26
【问题描述】：

由于我使用 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');
    }
  });
});

但它不能用作手风琴，请在此处查看 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 将是指向网页内容的实际链接，而不是虚拟链接

干杯

【问题讨论】：

标签： javascript jquery ajax content-management-system accordion

【解决方案1】：

您正在选择作为 li 元素的第一个子元素的锚链接

$('#amenu > li > a')

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

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

您的方法也无法检查活动类，但您可以通过 hasClass 函数检查它。

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

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

【讨论】：

【解决方案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');
        }
      });
});

【讨论】：

我想现在已经到了某个地方:)。一旦 currentbranch0 类处于活动状态，如何使手风琴展开？上面的代码在 CMS 上不起作用（手风琴在按下后直接向上滑动）。我认为这是由于 CMS 使跨度处于活动状态？即使是硬编码 currentbranch0 分支的打开，如果 sselected 它会很棒:)
我使用 .click( ) 会是我的问题吗？我需要在加载时打开活动的，事实上它不会在点击时打开，因为点击会将用户发送到另一个页面，它应该打开
我认为您应该添加有问题的基于 cms 的内容。从上面的评论中很难分析出你想要什么。
欢呼用户，我在这里清除了我的新线程上的一些要点：stackoverflow.com/questions/15135822/… :)

【解决方案3】：

使用这个...

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

看看这个jSfiddle Example

【讨论】：