Question

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

例如，当您在第1列和第2列中按“更多”时，您会看到一个   右侧列下的间隙。这是我需要的空白   填补额外的div。

用额外的div（与...分开）填补空白会很棒   这些列像引用或图像，但具有相同的功能），现在我看了基于的＆gt;教程   “将元素添加到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";
                }
            }
        }
    }
}

more.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/ - 您可以使用它来获取元素的高度或设置它。

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

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

2 个答案: