|
Помогите со скриптом разворачивания текста
<script type="text/javascript">
$(document).ready(function() {$('#opislink1').click(function() {
if ( jQuery.browser.msie && parseInt(jQuery.browser.version) == 6) {
if ($('#opis1').css("display")=="block") {$('#opis1').css("display", "none");
} else {$('#opis1').css("display", "block");
}
} else {$('#opis1').toggle("normal");
}
if ($('#button3').text()=='Развернуть') {$('#button3').text('Свернуть');
} else {$('#button3').text('Развернуть');
}
});
});
</script>
<a href="javascript:void(0)" id="opislink1"><class id="button3">Развернуть</div></a> <div class="opis" id="opis1">Текст</div> этот скрипт работает только с одной кнопкой разворачивания текста, а у меня на сайте их несколько. Как сделать, чтобы скрипт работал со всеми кнопками? |
Назначайте события по классу элемента, а не по id. Только тогда надо смотреть или отношения потомок/родитель или отслеживать предыдущий/следующий.
|
<script type="text/javascript" src="http://yandex.st/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
div.opis{
display:none;
height:100px;
width:340px;
padding:12px;
margin-top:12px;
border-radius:15px;
-webkit-border-radius:15px;
-khtml-border-radius:15px;
-moz-border-radius:15px;
-o-border-radius:15px;
-ms-border-radius:15px;
box-shadow: 0px 5px 18px #000;
-webkit-box-shadow:0px 5px 18px #000;
-khtml-box-shadow:0px 5px 18px #000;
-moz-box-shadow:0px 5px 18px #000;
-ms-box-shadow:0px 5px 18px #000;
}
a.opislink {
margin-top:12px;
display:block;
}
</style>
<div class="Wrap">
<a href="#" class="opislink" >Развернуть</a>
<div class="opis">Текст</div>
</div>
<div class="Wrap">
<a href="#" class="opislink" >Развернуть</a>
<div class="opis">Текст</div>
</div>
<div class="Wrap">
<a href="#" class="opislink" >Развернуть</a>
<div class="opis">Текст</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('a.opislink:not(.active)').live('click',function(){
$(this).addClass('active');
$(this).html('Свернуть')
$(this).parent().find('div.opis').slideDown(760)
return false;
});
$('a.opislink.active').live('click',function(){
$(this).removeClass('active');
$(this).html('Развернуть')
$(this).parent().find('div.opis').slideUp(760)
return false;
});
});
</script>
|
Deff,
Очень красиво.) а можно сделать чтобы заголовки оставались прежнеми?! |
спасибо огромное
|
Deff,
я тебя оч. уважаю за то что ты делаешь для новичков, но не лучше ли дать удочку, а не рыбу?)) |
Serg_pnz,
Ну мож я чуть эгоист - шеф просил нарастить скорость |
у меня такаяже проблема... накидал скриптов текст почти также красиво раскрывается(без рамки) но мне нужно чтоб при нажатии на следующую ссылку предыдущий текст закрывался
|
Deff,
поможите |
<script type="text/javascript" src="http://yandex.st/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
div.opis{
display:none;
height:100px;
width:340px;
padding:12px;
margin-top:12px;
border-radius:15px;
-webkit-border-radius:15px;
-khtml-border-radius:15px;
-moz-border-radius:15px;
-o-border-radius:15px;
-ms-border-radius:15px;
box-shadow: 0px 5px 18px #000;
-webkit-box-shadow:0px 5px 18px #000;
-khtml-box-shadow:0px 5px 18px #000;
-moz-box-shadow:0px 5px 18px #000;
-ms-box-shadow:0px 5px 18px #000;
}
a.opislink {
margin-top:12px;
display:block;
}
</style>
<div class="Wrap">
<a href="#" class="opislink" >Развернуть</a>
<div class="opis">Текст</div>
</div>
<div class="Wrap">
<a href="#" class="opislink" >Развернуть</a>
<div class="opis">Текст</div>
</div>
<div class="Wrap">
<a href="#" class="opislink" >Развернуть</a>
<div class="opis">Текст</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('a.opislink:not(.active)').live('click',function(){
$('a.opislink.active').click();
$(this).addClass('active');
$(this).html('Свернуть')
$(this).parent().find('div.opis').slideDown(760)
return false;
});
$('a.opislink.active').live('click',function(){
$(this).removeClass('active');
$(this).html('Развернуть')
$(this).parent().find('div.opis').slideUp(760)
return false;
});
});
</script>
|
| Часовой пояс GMT +3, время: 01:57. |
|