Question

我正在使用此更多功能：https://css-tricks.com/text-fade-read-more/

我在网页上使用此功能四次。当我打开一个div然后再打开另一个div，然后关闭第一个div时，第二个div被关闭而不是第一个div无法关闭。

是否可以确保关闭功能关闭相关的div？

这是jQuery：

<script>
var jq14 = jQuery.noConflict(true);
(function ($) {
    $(document).ready(function () {
        // your logic

        var mq = window.matchMedia("(min-width: 767px)");

        var $el, $ps, $up, totalHeight;

        $(".fade-box .button-read-on").click(function () {

            totalHeight = 0

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

            // measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
            $ps.each(function () {
                totalHeight += $(this).outerHeight();
                // FAIL totalHeight += $(this).css("margin-bottom");
            });

            $up
                .css({
                    // Set height to prevent instant jumpdown when max height is removed
                    "height": $up.height(),
                    "max-height": 9999
                })
                .animate({
                    "height": totalHeight
                })
                .click(function () {
                    //After expanding, click paragraph to revert to original state
                    $p.fadeIn();

                    if (mq.matches) {
                        $up.animate({
                            "height": 190
                        });
                    } else {
                        $up.animate({
                            "height": 210
                        });
                    }

                });

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

            // prevent jump-down
            return false;

        });
    });
}(jq14));

这是HTML中的close函数：

<p class="close">Close <img src="img/arrow-up.png"></p>

我认为问题在于我在网页上多次使用这种密切的HTML。

任何帮助都会非常感谢。

Answer 1

移动此行

var $el, $ps, $up, totalHeight;

这一行之后

$(".fade-box .button-read-on").click(function () {

单击第一个变量后，变量将设置为第一个变量的正确值，但是当您单击第二个变量时，它们将被覆盖。更改它们的范围使得您可以拥有每个变量的多个实例，每个实例对应于正确的元素。

Answer 2

这是一个快速练习，看看是否有更可读的方式。如果你使用rel这样的东西，那将是明确的JS是什么，而不是CSS样式。它使用您选择的整数高度隐藏内容，并以您想要的任何选择器为目标。对于每个项目，您希望发生这种情况......它会抓住它的自然高度并将其存储在元素的数据属性中。然后，当您单击read-more时，它将占用该高度并将其用于动画。

http://codepen.io/sheriffderek/pen/rLYdky

标记

<article rel='reveal'>

    <h2>Thing 1</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat quaerat molestiae voluptas soluta officia veniam ad, alias fuga sit, adipisci, similique harum odio eos vel. Et, numquam, error. Doloribus, ipsa!</p>

    ...

    <button>More</button>

</article>

的JavaScript

(function() { // closure for this program // so nothing leaks...

    var hideContent = function(element, maxHeight) {
        $('[rel="reveal"]').each( function() {
            var naturalHeight = $(this).outerHeight();
            $(this).data('height', naturalHeight);
            $(this).css('height', maxHeight);
        });
    };

    $('[rel="reveal"]').on('click', function() {
        var naturalHeight = $(this).data('height');
        var speed = naturalHeight*2; // relative to height maybe?
        $(this).find('button').fadeOut();
        $(this).animate({
            'height': naturalHeight
        }, speed);
    });

    hideContent('[rel="reveal"]', 200);

})();

jQuery fadeOut关闭错误的div

2 个答案:

标记

的JavaScript