скрытие спойлера
Добрый день!
Есть спойлер на странице <a class="splLink" href="">открыть содержимое</a> <div class="splCont"> Содержимое блока <a class="splLink" href="" >свернуть</a><br> </div>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.splLink').click(function(){
$(this).parent().children('div.splCont').toggle('normal');
return false;
});
});
</script>
Отлично работает при клике по ссылке "открыть содержимое". но хочу добавить в конце скрытого блока ссылку "свернуть". Прописала для ссылки класс splLink, но почему то нет ввобще никакой реакции. Максимум чего смогла получить - свернуть все открытые спойлеры. Подскажите пож-та в чем проблема? P.S. Javascript только начинаю изучать, поэтому не судите строго, если вопрос элементарный.. |
vesna, твоя верстка не валидна... В строчные элементы не должны содержать блочные...
Цитата:
На будущее. Тестовые примеры нужно делать полные, так, чтобы их можно было скопировать и посмотреть в работе. Да и показать будет на чем... Огрызки мало что могут объяснить. |
Цитата:
|
vesna, есть разница между тестовым примером и "самым полным"... :)
Тестовый пример маленький но полностью отражает проблему. Но в любом случае решать тебе... |
Цитата:
|
Цитата:
|
Мне "оригиналы" вообще не интересны... :lol:
Я хочу подтолкнуть тебя саму к решению твоей же проблемы. Для этого именно тебе нужно сделать мааааленький но полный тестовый пример, иллюстрирующий твою же проблему. И только после этого я тебе подскажу следующий шаг. За тебя я делать ничего не собираюсь. :) Мне оно и даром не надо... |
Цитата:
А почему бы сейчас не сделать этого, итак по существу то ничего не сказано:( Пример Код всего этого выше |
Цитата:
|
Цитата:
Если бы меня интересовал такой вариант, написала бы в другой раздел. Никого за меня я делать ничего не просила. |
vesna,
<a href="" onclick="$(this).parent().toggle('normal');return false;" style='float: right; margin-right: 10px; '>свернуть</a>
|
<script type="text/javascript">
$(document).ready(function(){
$('.splLink').click(function(){
$(this).parent().children('div.splCont').toggle('normal');
return false;
});
$('.splLink1').click(function(){
$(this).parent().toggle('normal');
return false;
});
});
</script>
|
devote, Спасибо! Работает как надо)
|
vesna,
вы положили вторую кнопку внутрь скрываемого родителя, поэтому не работает. Надо сменить класс ссылки и добавить свой обработчик, что бы туглить родителя. Ща свояем. Наверное.)) upd. Ну вот! |
<div class=SpL>
<a class="splLink Visibl" href="">открыть содержимое</a>
<div class="splCont" style="display:none">
Содержимое блока
<br/>
<a class="splLink" href="" >свернуть</a><br>
</div>
</div>
<style>
.splLink {
opacity:0.00;
visibility:hidden;
transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
-ms-transition-duration: 0.6s; /* IE9+ */
}
.splLink.Visibl {
opacity:1.0;
visibility:visible;
}
</style>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.splLink').click(function(){
$('.splLink').addClass('Visibl');
$(this).removeClass('Visibl');
$(this).parents('.SpL:first').children('div.splCont').toggle('normal');
return false;
});
});
</script>
|
| Часовой пояс GMT +3, время: 05:21. |