JQuery показать / скрыть с постом DOM ссылку необходимо добавить еще одну ссылку - PullRequest
Новая
       23

JQuery показать / скрыть с постом DOM ссылку необходимо добавить еще одну ссылку

0 голосов
/ 19 июля 2011

У меня есть список определений с эффектом jquery show / hide и кнопкой «readmore», которая после его открытия меняется на «закрыть». Теперь мне нужно поставить еще одну кнопку, которая ссылается на якорь в верхней части экрана для каждого описания. Когда я попытался отредактировать скрипт, чтобы добавить новую ссылку, кнопка «Вернуться к началу страницы» стала другой кнопкой «Закрыть». Я не достаточно разбираюсь в JS, чтобы редактировать этот скрипт, чтобы он делал то, что мне нужно, без каких-либо странных последствий. Любая помощь приветствуется. 

SCRIPT
    $(function(){
    var slideHeight = 36;

    $('.jswrap').each(function(){
        var defHeight = $(this).height();

        if(defHeight >= slideHeight){
            $(this).css({'height':slideHeight,'max-height': defHeight});
            $(this).after($('<div class="jsreadmore"><a href="#">Read More</a></div>'));
        }
    });

    $('.jsreadmore a').click(function(){
        var $targetSlide = $(this).parent().prev(),
            curHeight = $targetSlide.height(),
            defHeight = $targetSlide.css('max-height');

        if(curHeight == slideHeight){
            $targetSlide.animate({
                height: defHeight
            }, "normal");
            $targetSlide.next().children('a').html('Close');    
        }else{
            $targetSlide.animate({
                height: slideHeight
            }, "normal");
            $targetSlide.next().children('a').html('Read More');
        }
        return false;
    });

});

HTML 

<div class="jscontainer">
            <h4><a id="onedefinition">Definition Text</a></h4>
            <div class="jswrap">
                 <p>content</p>
            <p>morecontent</p>
            </div></div>

CSS 

.content_sub1 .jscontainer {margin:0 auto;}
.content_sub1 .jscontainer h2 {font-size:20px;color:#0087f1;}
.content_sub1 .jswrap {position:relative; padding:10px; overflow:hidden;}
.content_sub1 .jsgradient {width:100%;height:35px; position:absolute; bottom:0; left:0;}
.content_sub1 .jsreadmore {padding:5px; color:#333; text-align:right;}
.content_sub1 .jsreadmore a {padding-right:22px; font-weight:bold; font-size:12px; text-transform: uppercase; color:#c44;  font-family:arial, sans-serif;}
.content_sub1 .jsreadmore a:hover {color:#000;}

LINK

www.doctorhtiller.com / procedures.html

1 Ответ

0 голосов
/ 19 июля 2011

Это потому, что вы манипулируете ВСЕМИ якорями в вашем элементе следующим образом: 

$targetSlide.next().children('a').html('Read More');

и 

$targetSlide.next().children('a').html('Close');

Код children('a') говорит: «Давайте затронем все якоря, которыепрямые потомки элемента next().Так как ваш якорь «возврата на верх страницы» - это просто еще один якорь, его HTML превращается в «Подробнее» или «Закрыть» соответственно.Что вам нужно сделать, это дифференцировать ваш якорь от якорей, созданных сценарием.Мы можем легко сделать это, добавив класс к исходным якорям.

Итак, вместо того, чтобы просто добавить <a href="#">, нам нужно его оживить.Измените: 

$(this).after($('<div class="jsreadmore"><a href="#">Read More</a></div>'));

на 

$(this).after($('<div class="jsreadmore"><a href="#" class="read_more_link">Read More</a></div>'));

Теперь гораздо проще ссылаться на этот конкретный элемент привязки.Просто добавьте класс к вашему коду выбора: 

$targetSlide.next().children('a.read_more_link').html('Read More');
$targetSlide.next().children('a.read_more_link').html('Close');
...