Переключите не работу
У меня есть ряд пар отделения ('заголовок' и 'тело'). Когда пользователь нажимает на заголовок, следующий раздел тела должен показать/скрыть (и обновить +/-значок). Все отделения записаны, чтобы быть "показанными" на загрузке страницы, но я хотел бы "закрыть" некоторые из них, и пользователь может открыть их, если они желают. Просто не может заставить это работать! Код ниже, если кто-либо может помочь!
Демонстрационный раздел:
<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();
Эта последняя строка не "переключает" указанное отделение (т.е. "закрывает" его). Кто-либо знает почему? Вероятно, что-то простое.
Спасибо!
4 ответа
Не будет переключать , просто указав:
$("#expanderAI").toggle();
За этим должно быть какое-то событие, например:
$('element').click(function(){
$("#expanderAI").toggle();
});
Обновление:
Попробуйте следующее:
$('#expanderAI').click(function(){
$(this).toggle();
});
функция переключения, похоже, не используется без параметров:
попробуйте использовать $ ('# elementID'). click (); вместо
Просто попробовал вариант этих идей :). Итак ...
Это не сработает, если я просто изменю последний .toggle () на .click () ... но ДЕЙСТВИТЕЛЬНО работает, если я сделаю это изменение, но вызову его ПОСЛЕ загрузки страницы. Я думаю, здесь проблема со сроками.
т.е. если я добавлю кнопку:
, а затем сделаю:
$('#tmpbtntog').click(function() {
$('#expanderAI').click();
}
);
, то щелчок по кнопке переключает div! Однако, если я просто заменю строку
$("#expanderAI").toggle();
в моем исходном коде выше на .click (), она НЕ будет работать! Странный. Любые идеи? Можете ли вы «отложить» эти вещи? Я называю это в document.ready и т. Д., Поэтому не думаю, что это проблема.
после перечитывания вопроса. Я бы изменил это на .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 (); в разделе готовности документа после того, как вы прикрепите обработчики, и он действительно должен работать. доказательство прямо здесь!