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

仅指定：

不会toggle

$("#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应该显示为aqua，但是在页面加载时它是红色的。 b / c click（）事件在文档就绪时触发。

所以把你的$（'＃ToggleMe'）。click（）;在您附加处理程序后，在您的文档就绪部分，它确实应该工作。证据就在这里！

Answer 3

切换功能似乎没有参数：

http://api.jquery.com/toggle/

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

Answer 4

这是令人困惑的一个

有两种版本的切换。

Toggle1 - http://api.jquery.com/toggle-event/

Toggle2 - http://api.jquery.com/toggle/#toggle2

似乎如果你在事件上下文中，将调用Toggle1。例如。在点击功能中。

如果您只是在事件函数之外进行toggle（），则会调用Toggle2。如果你想用这个切换，你必须传入true / false。真实显示，虚假隐藏。或者只是传递持续时间和动画类型等......只需检查API：）

Answer 5

刚试过这些想法的变化:)。所以......

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

即。如果我添加一个按钮：

然后执行：

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

然后点击按钮切换div！但是，如果我只是替换

行

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

在我上面的原始代码中使用.click（）它不起作用！奇怪的。有任何想法吗？你能“延迟”这些东西吗？我在一个文件中准备这个。已经等等，所以我认为这不是问题。

切换不工作

5 个答案: