向手风琴添加箭头答案

【问题标题】：Adding arrow to accordion向手风琴添加箭头
【发布时间】：2011-05-26 11:41:47
【问题描述】：

在这里使用大卫的回答：

Accordion - add arrow to each nav item?

在我的手风琴上：

Error Help::Multiple controls with the same ID 'ctl00' were found. FindControl requires that controls have unique IDs

箭头不显示..怎么了？

【问题讨论】：

您是否根据手风琴是否展开动态更改类？真正需要审查的是生成的 html
不，我不是。请检查我的代码..谢谢.stackoverflow.com/questions/4459668/…
您提供给 David 用于添加箭头的方法的链接取决于根据手风琴状态更改的类。我不是 .net 人，这就是为什么我想查看输出的 html。通过这种方式，我可以查看是否已经存在任何我们可以用作标识符的内容，或者如何格式化 javascript 以制作标识符

标签： c# asp.net jquery css

【解决方案1】：

我猜测了手风琴的工作原理——这里有一些应该可以工作的代码

jQuery：

function checkVisibility() {
  $('.accordionHeader.expanded').removeClass('expanded');
  $('.toggler .accordionContent:visible').each(function(){
    $(this).prev('.accordionHeader').addClass('expanded');
  });
}

$(document).ready(function(){
  checkVisibility();
  $('.toggler .accordionHeader').not('.expanded').click(checkVisibility());
});

css：

.toggler .accordionHeader {
  background:url(* add a path to an arrow here *) no-repeat left center transparent;
  }

.toggler .expanded {
      background-image:url(* add a path to alternate arrow here *);
    }

编辑 - 替代

在这里，我修改了您提供的链接中的脚本。使用提供的链接中的相同 css（未经测试） - 不是我上面输入的内容。上一个选项更好 imo...

function checkVisibility(){
  $('.accordionHeader.expanded').removeClass('expanded');
  $('.accordionHeader > span').text('▶');
  $('.toggler .accordionContent:visible').each(function(){
    $(this).prev('.accordionHeader').addClass('expanded').find('span').text('▼');
  });
}

$(document).ready(function(){
    $('.accordionHeader').each(function(){
        $('<span></span>').appendTo($(this));
    });
  $('.toggler .accordionHeader').not('.expanded').click(checkVisibility());
});

【讨论】：