向 dom jquery 添加额外的 div（切换单击更多功能）

Question

这是我在这个网站上的第一篇文章，我只是想知道是否有人可以帮助我解决一个已经持续一周的问题，我对 javascript 了解不多，但我会尝试将问题解释为尽我所能。

例如，当您在第 1 列和第 2 列中按“更多”时，您将看到 右侧柱下的间隙。这些是我需要的间隙 填充额外的 div。

用额外的 div 填补空白会很棒（与 列像引用或图像，但当然具有相同的功能），现在我查看了 >tutorials 基于 “将元素添加到 DOM jquery”，但我没有得到它 :( 阅读并 阅读它，仍然不明白它。这是带有的列 功能，一旦你按下"More"，你就会看到差距

图像显示了下一个同时出现的额外隐藏 div 延伸到填补空白的列以使另一列 甚至没有延长

JSFiddle

picture of the gaps

click_toggle.js

clickMenu = function(menu,element,cname) {
    var getEls = document.getElementById(menu).getElementsByTagName(element);

    for (var i=0; i<getEls.length; i++) {
            getEls[i].onclick=function() {
            if ((this.className.indexOf(cname))!=-1)
            {
            if ((this.className.indexOf('click'))!=-1) {
                this.className=this.className.replace("click", "");;
                }
                else {
                this.className+=" click";
                }
            }
        }
    }
}

更多.css：

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}
/* Float classes */
.f_right { float: right; }
.f_left { float: left; }



/* always visible */
#outer .holder {padding:1em; border:1px solid #ddd; margin:0 20px 10px 0;}
#outer .holder p {padding:5px 0 0 0; margin:0;}
#outer .holder p.bold {font-weight:bold;}
#outer .holder h2 {margin:0; padding:0;}

/* unclicked style div.more */
#outer div.more i {float:right; margin-right:-10px 10px 0 0; cursor:pointer; color:#c00; font-weight:bold;}
#outer div.more i.hide {display:none;}
#outer div.more p {display:none;}
#outer div.more img {display:none;}

/* clicked style div.click */
#outer div.click i.show {display:none;}
#outer div.click i.hide {display:block;}
#outer div.click p {display:block;}
#outer div.click img {display:block; float:left; padding-right:10px;}

Answer 1

您的标记/代码有点难以理解。以下是我的做法：

JSFiddle

我使用 JQuery 使代码更易于使用，并使用一些更简单的标记来阐明示例。请注意，因为我在 JQuery 中使用了 parent/find 方法，并且给定了所有类，所以很容易拥有多个框并且每个框都将独立工作。

您可以将想要显示和隐藏的任何内容放在“extraContent”div 中 - 在我的示例中，我放置了一些标题、段落和图像，但这可以是任何内容。

Javascript：

$(function() {

$(".toggleLink").on("click", function() {
    // $(this) will be the "more" / "less" link that was clicked.
    // Find its parent, then inside that - select the "extra content"
    // box and toggle its visibility
    var extraContentBox = $(this).parent().find(".extraContent");
    extraContentBox.toggle();

    // Update the text of the toggle link based on the new visiblility
    // of the "extra content" div
    var linkText = (extraContentBox.is(':visible')) ? "less" : "more";
    $(this).parent().find(".toggleLink").text(linkText);
});

});

更新：

我认为您需要进行试验才能使其看起来正确。以下是您可能需要的一些基本内容：

要隐藏一个元素，首先添加“display: none;”到 CSS，或者像这样的样式标签：

<div style="display: none;"></div>

要使用 JQuery 选择元素，请使用 #id 或 .class，例如：

$("#someElementID").show();
$(".someClass").hide();

使用 ID 为特定元素命名（在页面上必须是唯一的）。对多次使用的事物使用类。

点击元素时做某事：

$("#someElement").on("click", function() {
    // code here
});

判断一个元素是否可见：

var isVisible = $("#someElement").is(":visible");
if (isVisible) { 
    // do something
}

获取元素的高度：

var height = $("#someElement").height();

设置元素的高度：

$("#someElement").height(100);

Answer 2

如果我正确理解您的问题，我想您的意思是要匹配框的高度，以便它们彼此相邻排列？显示新内容后，您可以使用 Javascript 更新包含 div 的高度。

在您的点击处理程序中，显示/隐藏额外内容后，您可以（对于每一行）获取每个框的高度，并更新其他框以匹配最高框的高度。

如果您使用的是 JQuery，请查看 https://api.jquery.com/height/ - 您可以使用它来获取元素的高度或设置它。

至少在我的浏览器中，您的行看起来每行有两列 - 而不是四列。如果是这种情况，您需要执行一些逻辑来遍历行并处理成对的框。