1

由于我使用 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。

谢谢！:)

缺口

编辑：除此之外，手风琴不起作用的主要问题是，即使对于第二级，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 将是指向网页内容的实际链接，而不是虚拟链接

干杯

4

3 回答 3

2

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

$('#amenu > li > a')

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

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

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

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

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

于 2013-02-27T13:16:41.570 回答
1

您是否期待以下结果。请检查以下链接。

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');
        }
      });
});
于 2013-02-27T13:19:28.060 回答
1

用这个...

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

并查看此jSfiddle 示例

于 2013-02-27T13:25:58.297 回答