切换不工作

Question

我有一组div对('header'和'body').当用户点击标题时,下一个正文部分应显示/隐藏(并更新+/-图标).所有div都被写为在页面加载时"显示",但我想"关闭"它们中的一些,用户可以根据需要打开它们.只是不能让它工作!如果有人可以提供帮助,代码如下!

样品部分:

  <div class="expandingSection_head" id="expanderAI">
      <img class="imgExpand" src="../images/treeExpand_plus.gif" />
          Header text here
  </div>
  <div class="expandingSection_body">
      body text here
  </div>
  ...more pairs of divs like this on rest of page...

要切换的代码:

    $(".expandingSection_head").toggle(
    function() {
        $(this).css('background-color', '#6BA284');
        $(this).find('.imgExpand').attr('src', '../images/treeExpand_plus.gif');
        $(this).next(".expandingSection_body").slideUp(400);
    },
    function() {
        $(this).css('background-color', '#6BA284');
        $(this).find('.imgExpand').attr('src', '../images/treeExpand_minus.gif');
        $(this).next(".expandingSection_body").slideDown(400);
    });

    $("#expanderAI").toggle();

最后一行不会"切换"指定的div(即"关闭"它).谁知道为什么？可能是简单的事情.

谢谢!

Answer 1

它不会仅通过指定来切换:

$("#expanderAI").toggle();

它背后应该有一些事件,例如:

$('element').click(function(){
  $("#expanderAI").toggle();
});

更新:

试试这个:

$('#expanderAI').click(function(){
  $(this).toggle();
});