触发点击事件时选择父级？

Question

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

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

那么，如何选择我唯一的父级关闭按钮？请在下面查看我的 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

这有点难看，但如果你重构它，你应该可以让它正常工作。

我注释掉了你的 ma​​sonry 方法，因为这些方法不包括在内。

我认为这应该让你开始。看来这是因为您将字符串而不是数字相加。

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

            });

        });

<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>

Answer 2

要找到可以升级的父母，请使用.closest()

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

$el.closest(".sidebar-box").find('.read-less')

这是最近https://api.jquery.com/closest/的文档

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