siblings в таблице
Здравствуйте, есть такая проблема. Вот скрипт
$(document).ready(function(){
/* Start DocumentReady */
$("a.hideBtn").click(function(){
$(this).toggleClass('show').siblings('div.hideCont').slideToggle('normal');
return false;
});
/* End DocumentReady */
});
он прекрасно работает в такой конструкции <a class="hidebtn" href="javascript://" title="Показать\Скрыть блок">Показать</a> <div class="hideCont" style="display:none">Бла бла бла текст</div> но если поместить в таблицу, то скрипт прекращает работать <table> <tr> <td> <a class="hidebtn" href="javascript://" title="Показать\Скрыть блок">Показать</a> </td> </tr> <tr> <td> <div class="hideCont" style="display:none">Бла бла бла текст</div> </td> </tr> </table> Нужно сделать именно в таблице, чтобы искался следующий за "hidebtn" блок "hideCont", помогите пожалуйста. Вариант с id не подходит, так как таких блоков будет много и они будут всегда разные. Подозреваю что надо заменить команду "siblings" на какую-то другую, но так и не понял на какую. |
Avel Mink,
1. Элемент <a class="hidebtn" идёт певым в ячейке (или могут и до него быть) в данной td элементы ? 2. Элемент <div class="hideCont" всегда в иной ячейке, чем <a class="hidebtn" ? (Или они могут быть и в одной ? 3. Я так понимаю что ищем в табле следущий ближайший к "hidebtn" - class="hideCont" ? |
1. элемент <a class="hidebtn" href="javascript://" title="Скрыть блок">Показать</a>
идёт первым в ячейке (текст не в счёт 2. ищем в табле ближайший элемент, ниже Кликнутого "hidebtn" - у которого: class="hideCont" 3. В табле с кликабельным элементом "hidebtn" - нет дочерних таблиц ( Табла родитель - может и быть
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<table>
<tr>
<td>
<div class="hideCont" style="display:none">sadas 0</div>
</td>
</tr>
<tr>
<td>
<a class="hidebtn" href="javascript://" title="Скрыть блок">Показать</a>
</td>
</tr>
<tr>
<td>
<div class="PsevDo-hideCont" style="display:none">sadas</div>
</td>
</tr>
<tr>
<td>
<div class="hideCont" style="display:none">Бла бла бла текст</div>
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function(){
$("a.hidebtn").click( function(){
var tableTd = $(this).parents("table:first").find("td");
var start = tableTd.index($(this).parent("td"));
var end = tableTd.length;
var Td = tableTd.slice(start, end);
var a = Td.find('div.hideCont').eq(0);
a.slideToggle('normal');
if(a.length){
var z=$(this).text();
$(this).text($(this).attr("title"));
$(this).attr("title",z)
}
return false;
});
});
</script>
|
ох, спасибо огромное, то что надо. Если не сложно - можно сделать чтобы при нажатии, текст ссылки менялся не на title, а на просто указанный html код. При свернутом состоянии - "подробнее + картинка", при развернутом - "свернуть + картинка".
|
| Часовой пояс GMT +3, время: 21:05. |