Toggle not working

Question

У меня есть набор пар div («заголовок» и «тело»). Когда пользователь нажимает на заголовок, следующий раздел тела должен показывать/скрывать (и обновлять значок +/-). Все divs написаны как «показаны» на загрузке страницы, но я хотел бы «закрыть» некоторые из них, и пользователь может их открыть, если они того пожелают. Просто не могу заставить его работать! Код ниже, если кто-то может помочь!

Пример раздела:

<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(); 

Эта последняя строка не "тумблер" указанный ДИВ (т.е. "закрыть" его). Кто-нибудь знает, почему? Наверное, что-то простое.

Спасибо!

Answer 1

Это не будет toggle просто указав:

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

Там должно быть какое-то событие позади него, например:

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

Update:

Попробуйте это:

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

Answer 2

функция переключения не кажется, есть использование без параметров:

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

попробуйте использовать $('#elementID').click(); вместо

Answer 3

на повторное чтение quesiton. я изменил бы это на .click(), тогда он должен запустить ваш обработчик переключения, который был ранее прикреплен.

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

EDIT:

хорошо: я просто написал тестовый скрипт: проверить это:

<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> 

Итак, ДИВ я меняюсь должен показать, как аква, но при загрузке страницы оно красное. b/c событие click() запускает готовый документ.

так что поставьте свой $ ('# ToggleMe'). Click(); в разделе готового документа после прикрепления обработчиков, и он действительно должен работать. доказательство прямо здесь!

Answer 4

Просто попробовал вариант этих идей :). Итак ...

Это не работает, если я просто изменяю последний .toggle() на .click() ... но он работает, если я делаю это изменение, но вызываю его ПОСЛЕ загрузки страницы. Я думаю, что здесь есть проблема с синхронизацией.

i.e.если добавить кнопку:

, а затем сделать:

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

нажав кнопку переключает DIV! Однако, если я просто заменю линию

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

в моем исходном коде выше с .click() он НЕ работает! Weird. Есть идеи? Можете ли вы «задержать» эти вещи? Я называю это в документе. Уже и т. Д., Поэтому я не думаю, что это проблема.

Answer 5

Это заблуждение один

Там две версии тумблера.

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

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

Кажется, что если вы в контексте событий, Toggle1 будет называться. Например. внутри функции щелчка.

Если вы просто используете toggle() вне функции события, вызывается Toggle2. Если вы хотите переключиться с помощью этого, вам нужно будет передать true/false. Истинно показывать, ложно скрывать. Или просто перейдите в длительности и типы анимации и т. Д. Просто проверьте API :)