jquery 显示/隐藏 post dom 链接需要添加另一个链接

Question

我有一个定义列表，其中包含 jquery 显示/隐藏效果和“阅读更多”按钮，一旦打开，该按钮就会更改为“关闭”。我现在需要在屏幕顶部放置另一个按钮来引用每个描述的锚点。当我尝试编辑脚本以添加新链接时，“返回页面顶部”按钮变成另一个“关闭”按钮。我对 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;}

链接

www.doctorhtiller.com/procedures.html

Answer 1

这是因为您正在使用以下内容操作元素中的所有锚点：

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

并且

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

children('a') 代码表示“让我们影响作为 next()< 的直接子级的所有锚点/代码> 元素”。由于您的“返回页面顶部”锚点只是另一个锚点，因此它的 html 分别变为“阅读更多”或“关闭”。您需要做的是将您的锚点与脚本创建的锚点区分开来。我们可以通过向原始锚点添加一个类来轻松地做到这一点。

因此，我们需要为其增添趣味，而不是仅仅添加 。更改：

$(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');