Скрыть/показать div, меняя иконку плюс/минус
Ребята, упростил код, не понимаю почему не пашет?
Всё же до безобразия просто! :-/ Полный пример: http://www.usaparts.ru/jquerytest/index.html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Функция открывает/закрывает div и меняет соответствующую диву иконку
function showClose(id) {
$('.div_' + id).toggle(
function () {
$("#img_" + id).attr('src', 'minus.gif');
},
function () {
$("#img_" + id).attr('src', 'plus.gif');
}
);
}
</script>
<img id="img_07" src="minus.gif" onclick='showClose("07")'>
<div class="div_07">Текст текст текст текст текст</div>
<br>
<img id="img_09" src="minus.gif" onclick='showClose("09")'>
<div class="div_09">Текст2 текст2 текст2 текст2 текст2</div>
|
Цитата:
|
Цитата:
|
А, ну да, не знал - не большой я знаток jQuery:)
|
Не знаю как у тебя там устроен toggle (читал но не понял :) ), но вот так работает:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
function showClose(id) {
$('.div_' + id).toggle(
function() {
if ($(this).is(':visible'))
$('#a_'+id).html('Спрятать');
else
$('#a_'+id).html('Показать');
}
);
}
</script>
</head>
<body>
<a href="#" id="a_07" onclick="showClose('07'); return false;">Спрятать</a>
<div class="div_07">Текст текст текст текст текст</div>
<br>
<a href="#" id="a_09" onclick="showClose('09'); return false;">Спрятать</a>
<div class="div_09">Текст2 текст2 текст2 текст2 текст2</div>
</body>
</html>
|
Используя toggle, я следовал следующему описанию:
Цитата:
|
Ну так указывая
$('.div_' + id).toggle
Вешается событие на сам ДИВ, а вам надо по нажатию на изображение менять ? |
Цитата:
Как так? А почему тогда такой код закрывает див, по нажатию на изображение? -
function showClose(id) {
$('.div_' + id).toggle();
}
|
Тугглите лучше классы, сдвигая картинку.
|
Так:
$('.div_' + id).toggle();
Ты просто меняешь видимость ДИВа (Показать.Спрятать) Подробнее А той конструкцией ты задаешь функции которые будут выполняться при кликах: Подробнее .toggle( handler(eventObject), handler(eventObject), [ handler(eventObject) ] ); handler(eventObject) - Функция выполняется когда четное число клика handler(eventObject) - Функция выполняется когда нечетное число клика handler(eventObject) - Дополнительный обработчик Пример из документации:
<html>
<head>
<style>
ul { margin:10px; list-style:inside circle; font-weight:bold; }
li { cursor:pointer; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<ul>
<li>Go to the store</li>
<li>Pick up dinner</li>
<li>Debug crash</li>
<li>Take a jog</li>
</ul>
<script>
$("li").toggle(
function () {
$(this).css({"list-style-type":"disc", "color":"blue"});
},
function () {
$(this).css({"list-style-type":"disc", "color":"red"});
},
function () {
$(this).css({"list-style-type":"", "color":""});
}
);
</script>
</body>
</html>
|
Спасибо, что помогли разобраться.
Еще вопрос, как сюда прикрутить мгновенное сокрытие? А то тугглится на манер slideUp/slideDown |
Указывайте малое время эффекта
$('#foo').toggle(1);
и не будет заметен эффект слайда |
В пень этот запутанный туггл..
Вот так сделаю и не буду париться http://www.usaparts.ru/jquerytest/index04.html |
Так я тебе именно этот вариант и предложил вначале)))) точнее похожий))
|
| Часовой пояс GMT +3, время: 15:50. |