Question

我正在尝试在触发click事件时选择父元素。我正在尝试以下方法。我有5个侧栏框，具有相同的类和不同的内容，如下所示。

首先，侧边栏框显示一些内容，当我们点击“阅读更多”按钮时，它会显示父元素的其余内容。之后，read more按钮隐藏在父框中，并显示关闭按钮，但它显示所有其他框，而不是父框。

那么，我怎样才能选择我唯一的父关闭按钮？请检查下面的javascript代码。

<div class="artist_bio sidebar-box">

    <!-- Default Show this text -->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, exercitationem.</p>

    <!-- After Clcik on .read-more-button it's showes -->
    <p>Lorem ipsum dolor sit amet.</p>

    <p class="read-more"><a href="#" class="button moretag read-more-button">Read More</a></p>
    <p class="read-less"><a href="#" class="button read-less-button">Close</a></p>
</div>

JavaScript就在这里 -

$(function() {

            var $el, $ps, $up, totalHeight;
            var $orgHeight = $('.sidebar-box').height();

            $(".sidebar-box .read-more-button").click(function() {

                totalHeight = 0

                $el = $(this); $p  = $el.parent(); $up = $p.parent();
                $ps = $up.find("p:not('.read-more')");

                $ps.each(function() {
                    totalHeight += $(this).outerHeight();
                    // FAIL totalHeight += $(this).css("margin-bottom");
                });

                $up
                    .css({
                        "height": $up.height(),
                        "max-height": 9999,
                        "opacity": 1,
                    })

                   .animate({
                        "height": totalHeight
                    },500,function(){

                    //Callback - after the animation is over
                    jQuery('#masonry-content').masonry(); });

                // fade out read-more
                $p.fadeOut();
                $('.read-less-button').fadeIn(50);

                // prevent jump-down
                return false;

            });

  /*Another Code*/
            $(".sidebar-box .read-less-button").click(function() {

                $el = $(this);
                $p  = $el.parent();
                $up = $p.parent();
                totalHeight = $up.height();

                $up
                    .css({

                        "height": totalHeight,
                        "max-height": 9999
                    })

                   .animate({
                        "height": $orgHeight
                    },500,function(){

                    //Callback - after the animation is over
                    jQuery('#masonry-content').masonry(); });

                // fade out read-less
                $p.fadeOut();
                $('.read-more').fadeIn();


                // prevent jump-down
                return false;

            });

        });

Answer 1

这有点难看，但如果你重构它，你应该能够让它运作良好。

我评论了您的砌体方法，因为这些方法并未包括在内。

我认为这应该让你开始。它似乎是因为你在一起添加字符串，而不是数字。

＆＃13;

$(function() {

            var $el, $ps, $up, totalHeight;
            var $orgHeight = $('.sidebar-box').height();

            $(".sidebar-box .read-more-button").click(function() {

                totalHeight = 0

                $el = $(this); $p  = $el.parent(); $up = $p.parent();
                $ps = $up.find("p:not('.read-more')");

                $ps.each(function() {
                    totalHeight += parseInt($(this).outerHeight());
                    totalHeight += parseInt($(this).css("margin-bottom").replace('px',''));
                });

                $up
                    .css({
                        "height": $up.height(),
                        "max-height": 9999,
                        "opacity": 1,
                    })

                   .animate({
                        "height": totalHeight
                    },500,function(){

                    //Callback - after the animation is over
                    //jQuery('#masonry-content').masonry(); 
                    });

                // fade out read-more
                $p.fadeOut();
                $('.read-less-button').fadeIn(50);

                // prevent jump-down
                return false;

            });

  /*Another Code*/
            $(".sidebar-box .read-less-button").click(function() {

                $el = $(this);
                $p  = $el.parent();
                $up = $p.parent();
                totalHeight = $up.height();

                $up
                    .css({

                        "height": totalHeight,
                        "max-height": 9999
                    })

                   .animate({
                        "height": $orgHeight
                    },500,function(){

                    //Callback - after the animation is over
                    //jQuery('#masonry-content').masonry(); 
                    });

                // fade out read-less
                $p.fadeOut();
                $('.read-more').fadeIn();


                // prevent jump-down
                return false;

            });

        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="artist_bio sidebar-box">

    <!-- Default Show this text -->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, exercitationem.</p>

    <!-- After Clcik on .read-more-button it's showes -->
    <p>Lorem ipsum dolor sit amet.</p>

    <p class="read-more"><a href="#" class="button moretag read-more-button">Read More</a></p>
    <p class="read-less"><a href="#" class="button read-less-button">Close</a></p>
</div>

＆＃13;

Answer 2

要查找可以升级的父级ifelse

.closest()然后.closest("parent_selector")。在你的情况下，它将是

.find(close_button)

以下是最近https://api.jquery.com/closest/

的文档

对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。

触发click事件时选择父项？

2 个答案: