Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.08.2012, 18:29
Аспирант
Отправить личное сообщение для Александр141 Посмотреть профиль Найти все сообщения от Александр141
 
Регистрация: 21.08.2012
Сообщений: 36

Помогите со скриптом разворачивания текста
<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>


этот скрипт работает только с одной кнопкой разворачивания текста, а у меня на сайте их несколько. Как сделать, чтобы скрипт работал со всеми кнопками?
Ответить с цитированием
  #2 (permalink)  
Старый 21.08.2012, 19:53
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

Назначайте события по классу элемента, а не по id. Только тогда надо смотреть или отношения потомок/родитель или отслеживать предыдущий/следующий.
Ответить с цитированием
  #3 (permalink)  
Старый 21.08.2012, 20:32
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<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, 21.08.2012 в 20:34.
Ответить с цитированием
  #4 (permalink)  
Старый 21.08.2012, 20:41
Аспирант
Отправить личное сообщение для dimas15 Посмотреть профиль Найти все сообщения от dimas15
 
Регистрация: 21.08.2012
Сообщений: 86

Deff,
Очень красиво.) а можно сделать чтобы заголовки оставались прежнеми?!
Ответить с цитированием
  #5 (permalink)  
Старый 21.08.2012, 21:53
Аспирант
Отправить личное сообщение для Александр141 Посмотреть профиль Найти все сообщения от Александр141
 
Регистрация: 21.08.2012
Сообщений: 36

спасибо огромное
Ответить с цитированием
  #6 (permalink)  
Старый 22.08.2012, 09:42
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

Deff,
я тебя оч. уважаю за то что ты делаешь для новичков, но не лучше ли дать удочку, а не рыбу?))
Ответить с цитированием
  #7 (permalink)  
Старый 22.08.2012, 09:56
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Serg_pnz,
Ну мож я чуть эгоист - шеф просил нарастить скорость
Ответить с цитированием
  #8 (permalink)  
Старый 10.01.2013, 21:56
Аспирант
Отправить личное сообщение для Александр БЛА БЛА Посмотреть профиль Найти все сообщения от Александр БЛА БЛА
 
Регистрация: 10.01.2013
Сообщений: 32

у меня такаяже проблема... накидал скриптов текст почти также красиво раскрывается(без рамки) но мне нужно чтоб при нажатии на следующую ссылку предыдущий текст закрывался
Ответить с цитированием
  #9 (permalink)  
Старый 10.01.2013, 21:57
Аспирант
Отправить личное сообщение для Александр БЛА БЛА Посмотреть профиль Найти все сообщения от Александр БЛА БЛА
 
Регистрация: 10.01.2013
Сообщений: 32

Deff,
поможите
Ответить с цитированием
  #10 (permalink)  
Старый 10.01.2013, 22:21
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите разобраться со скриптом alinastil Элементы интерфейса 1 02.04.2011 18:41
помогите со скриптом shkyra Общие вопросы Javascript 2 25.01.2011 22:38
помогите с скриптом $12ANDRE12$ Firefox/Mozilla 2 12.05.2009 21:46
Помогите со скриптом Pilageen Общие вопросы Javascript 5 13.04.2009 14:13
Помогите со скриптом сворачивания текста Shokoladniu Элементы интерфейса 17 05.04.2009 13:10