Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   раскрывающийся и закрывающися текст при клику (https://javascript.ru/forum/jquery/40755-raskryvayushhijjsya-i-zakryvayushhisya-tekst-pri-kliku.html)

hardware 19.08.2013 00:49

раскрывающийся и закрывающися текст при клику
 
Здравствуйте, не могу сделать что бы при клике по кнопке .redmoreNew показывался весь текст, а при втором клике скрывался, а изночально был скрыт. Куче чего перепробовал не работает:help:
<div class="nuw">
    <img src="css/img/orbit/n.jpg" width="125" height="125" />
    <div class="cotNew">
        <a href="#">Новый сайт</a>
        <p class="dit">09.08.2013</p>
        <p class="cotNew_sob">Задача организации, в особенности же постоянный количественный рост и сфера нашей активности требуют определения и уточнения дальнейших направлений развития. Таким образом реализация намеченных плановых заданий в значительной степени обуславливает создание форм развития. Значимость этих проблем настолько даний в значительной степени</p>
    </div>
    <div class="cl"></div>
</div>
 <div class="nuw">
    <img src="css/img/orbit/asus.jpg" width="125" height="125" />
    <div class="cotNew">
        <a href="#">Новые поступления от ASUS</a>
        <p class="dit">09.08.2013</p>
        <p class="cotNew_sob">При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.По своей сути рыбате</p>
    </div>
    <div class="cl"></div>
</div>
 <div class="nuw">
    <img src="css/img/orbit/graphics-palit.jpg" alt="л" width="125" height="125" />
    <div class="cotNew">
        <a href="#">Скидки на видеокарты Palit</a>
        <p class="dit">09.08.2013</p>
        <p class="cotNew_sob">Разнообразный и богатый опыт новая модель организационной деятельности позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. С другой стороны начало пРазнообразный и богатый опыт новая модель организационной деятельности позволяет оценить Разнообразный и богатый опыт новая модель организационной деятельности позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. С другой стороны начало пРазнообразный и богатый опыт новая модель организационной деятельности позволяет оценить Разнообразный и богатый опыт новая модель организационной деятельности позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. С другой стороны начало пРазнообразный и богатый опыт новая модель организационной деятельности позволяет оценить Разнообразный и богатый опыт новая модель организационной деятельности позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. С другой стороны начало пРазнообразный и богатый опыт новая модель организационной деятельности позволяет оценить Разнообразный и богатый опыт новая модель организационной деятельности позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. С другой стороны начало пРазнообразный и богатый опыт новая модель организационной деятельности позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. С другой стороны начало повседневной Разнообразный и богатый опыт новая модель организационной деятельности позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. С другой стороны начало повседневной Разнообразный и богатый опыт новая модель организационной деятельности позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. С другой стороны начало повседневной Разнообразный и богатый опыт новая модель организационной деятельности позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. С другой стороны начало повседневной овседневной работы по формированию позиции в значительной степени обуславливает создание модели развития.</p>
    </div>
    <div class="cl"></div>
</div>

var cotNew_sob = $('.cotNew_sob');
    cotNew_sob.each(function() {
        if ($(this).text().length>333){
            var isTe = $(this).text();
            var resnew = isTe.substr(0,333);
            $(this).text(resnew);
            $(this).after("<button class='redmoreNew'>Подробнее</button>");
            var sosti = false;
            $('.redmoreNew').toggle(function() {
                var isTe2 = $(this).parent().find(".cotNew_sob").text();
                var resnew2 = isTe2.substr(0,333);
                $(this).parent().find(".cotNew_sob").text(isTe2);
                alert(isTe2)
            },function() {
                var isTe2 = $(this).parent().find(".cotNew_sob").text();
                var resnew2 = isTe2.substr(0,333);
                $(this).parent().find(".cotNew_sob").text(resnew2);
                alert(resnew2)
            })
        }
    });

рони 19.08.2013 02:13

hardware,
:write:
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>
<div class="nuw">
    <img src="css/img/orbit/n.jpg" width="125" height="125" />
    <div class="cotNew">
        <a href="#">Новый сайт</a>
        <p class="dit">09.08.2013</p>
        <p class="cotNew_sob">Задача организации, в особенности же постоянный количественный рост и сфера нашей активности требуют определения и уточнения дальнейших направлений развития. Таким образом реализация намеченных плановых заданий в значительной степени обуславливает создание форм развития. Значимость этих проблем настолько даний в значительной степени</p>
    </div>
    <div class="cl"></div>
</div>
 <div class="nuw">
    <img src="css/img/orbit/asus.jpg" width="125" height="125" />
    <div class="cotNew">
        <a href="#">Новые поступления от ASUS</a>
        <p class="dit">09.08.2013</p>
        <p class="cotNew_sob">При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.По своей сути рыбате</p>
    </div>
    <div class="cl"></div>
</div>
 <div class="nuw">
    <img src="css/img/orbit/graphics-palit.jpg" alt="л" width="125" height="125" />
    <div class="cotNew">
        <a href="#">Скидки на видеокарты Palit</a>
        <p class="dit">09.08.2013</p>
        <p class="cotNew_sob">Разнообразный и богатый опыт новая модель организационной деятельности позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. С другой стороны начало пРазнообразный и богатый опыт новая модель организационной деятельности позволяет оценить Разнообразный и богатый опыт новая модель организационной деятельности позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. С другой стороны начало пРазнообразный и богатый опыт новая модель организационной деятельности позволяет оценить Разнообразный и богатый опыт новая модель организационной деятельности позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. С другой стороны начало пРазнообразный и богатый опыт новая модель организационной деятельности позволяет оценить Разнообразный и богатый опыт новая модель организационной деятельности позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. С другой стороны начало пРазнообразный и богатый опыт новая модель организационной деятельности позволяет оценить Разнообразный и богатый опыт новая модель организационной деятельности позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. С другой стороны начало пРазнообразный и богатый опыт новая модель организационной деятельности позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. С другой стороны начало повседневной Разнообразный и богатый опыт новая модель организационной деятельности позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. С другой стороны начало повседневной Разнообразный и богатый опыт новая модель организационной деятельности позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. С другой стороны начало повседневной Разнообразный и богатый опыт новая модель организационной деятельности позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. С другой стороны начало повседневной овседневной работы по формированию позиции в значительной степени обуславливает создание модели развития.</p>
    </div>
    <div class="cl"></div>
</div>
<script>
 var cotNew_sob = $('.cotNew_sob');
 cotNew_sob.each(function()
   {var el = $(this);
     if (el.text().length>333) {
       var isTe = el.text();
       var resnew = isTe.substr(0, 333);
       el.text(resnew);
       var button = $("<button/>",
         {"class": "redmoreNew",
          "text": "Подробнее",
          "click": function ()
           {
             var text = el.text();
             el.text(text == resnew? isTe: resnew)
           }
         }
       );
       el.after(button);
     }
   }
 );
</script>
</body>

</html>

hardware 19.08.2013 11:20

:) круууто спасибо большое, я вот только не очень понимаю что происходить в 47строке как это так:) я думал что функция jquery может только отбирать элементы из DOM ,а она там походу его создает или я что то не понимаю:blink: ???

рони 19.08.2013 13:45

Цитата:

Сообщение от hardware
она там походу его создает

создание элемента с параметрами jQuery( html, attributes ) с версии 1.4

hardware 19.08.2013 16:16

Спосибо


Часовой пояс GMT +3, время: 06:13.