切换不起作用

Question

我有一组 div 对（一个“标题”和一个“正文”）。当用户单击标题时，下一个正文部分应显示/隐藏（并更新 +/- 图标）。所有的 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();
});

Answer 2

重新阅读问题后。我会将其更改为 .click() 然后它应该触发之前附加的切换处理程序。

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

编辑：

好吧：我刚刚写了一个测试脚本：检查一下：

<div id="ToggleMe">Toggle Me</div>
<div id="ChangeMe" style="background-color:Aqua;">Hello WOrld</div>
<script type="text/javascript">
 $(function () {
        $('#ToggleMe').toggle(
            function () {
                $('#ChangeMe').css('background-color', '#ff0000');

            },
            function () {
                $('#ChangeMe').css('background-color', '#000000');
            }

        );

        $('#ToggleMe').click();


    });
</script>

所以，我要更改的 div 应该显示为浅绿色，但在页面加载时它是红色的。 b/c click() 事件在文档准备就绪时触发。

所以把你的 $('#ToggleMe').click();在附加处理程序后，在文档准备部分中，它确实应该可以工作。证据就在这里！

Answer 3

切换功能似乎没有参数的使用：

http://api.jquery.com/切换/

尝试使用$('#elementID').click();代替

Answer 4

这是一个令人困惑

的切换有两个版本。

切换1 - http://api.jquery.com/toggle-event/

切换2 - http://api.jquery.com/toggle/#toggle2

看来，如果你在事件上下文中，Toggle1 将被调用。例如在点击函数中。

如果您只是在事件之外执行toggle()，则将调用Toggle2 函数。如果你想切换这个，你必须传入 true/false。真则显，假则隐。或者只是传递持续时间和动画类型等...只需检查 API :)

Answer 5

只是尝试了这些想法的变体:)。所以...

如果我只是将最后一个 .toggle() 更改为 .click() ，它就不起作用...但如果我进行更改但在页面加载后调用它，它就可以工作。我认为这里存在一个时间问题。

即如果我添加一个按钮：

然后执行以下操作：

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

然后单击按钮切换 div！但是，如果我只是用 .click() 替换上面原始代码中的行，

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

它就不起作用！诡异的。有什么想法吗？你能“推迟”这些事情吗？我在 document.ready 等中调用它，所以我认为这不是问题。