Question

我迷路了。我在这工作：http://dan.jecool.net/tkacma/tkacma.html

这是我第一次使用javascript，很抱歉你会在那里读到的一切。：）

我的目标就是这个效果：https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

我确实尝试使用该演示中的代码，但我更加困惑。我不希望你为我输入这个，我只需指导我必须使用的东西。（我想一次只展示一个div并将所有内容对齐到顶部。）

谢谢你的一切。

（希望你理解，这是我第一次尝试用英语编写代码）。

HTML

    <div class="container">
        <div class="bunka">
        <img src="tang.jpg">
        <span onclick="showmefulltang()" class="tang"> 
        <div class="text"> <p>MÍSA TANG</p><p> DESIGN</p></div></span>
        </div>
        <div class="bunka">
        <img src="matys.jpg">
        <span onclick="showmefullmat()" class="mat"> 
        <div class="text"> <p>MATY'S</p> <p>LOGO</p></div> </span>
        </div>

        <div class="bunka">
        <img src="mill.jpg"><span onclick="showmefullmill()" class="mill">
        <div class="text"> <p>MILL</p><p>DESIGN </p></div> </span>
        </div>

        <div class="bunka">
        <img src="zlutahala.jpg">
        <span onclick="showmefullzlut()" class="zlut"> 
        <div class="text"> <p>ZLUTA HALA</p><p>LOGO</p> </div> </span>
        </div>


            <div id="fulltang">
                tang tang tang
            </div>
            <div id="fullmat">
                matis matis matis
            </div>
            <div id="fullmill">
                mill mill mill
            </div>
            <div id="fullzlut">
                zlutahala zlutahala zlutaha
            </div>

CSS

    .balenibunek {
        margin: 0;
        float:left;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        width: 1360px;
        }

    .bunka {
        position: relative;
        padding: 0px;
        display:inline-block;
        flex:1;
        width: 340px;
        height: 340px;
        }


    .bunka img{
        height:340px;
        }


    .bunka span {
        height:340px;
        width: 340px;
        display:none;
    }
    .bunka span .text {
    font-size: 26px;
    text-align:center;
    padding-top: 40%;
    letter-spacing: 0.8px;
    }
    .bunka:hover img { 
    display:none;
    }

    .bunka:hover span { 
        display:block;
    }

    .bunka:hover .text {
        -webkit-animation: slide-down 0.7s ease-out;
        -moz-animation: slide-down 0.7s ease-out;
    }

#fulltang {
    background-color: #999999;
    width: 1128px;
    height: 564px;
    text-align:center;
    display:none;
}
#fullmat{
    background-color: #999999;
    width: 1128px;
    height: 564px;
    text-align:center;
    display:none;
}

#fullmill{
    background-color: #999999;
    width: 1128px;
    height: 564px;
    text-align:center;
    display:none;
}

#fullzlut{
    background-color: #999999;
    width: 1128px;
    height: 564px;
    text-align:center;
    display:none;
}

JAVA SCRIPT

    function showmefulltang() {
    var x = document.getElementById("fulltang");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}   

function showmefullmat() {
    var x = document.getElementById("fullmat");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}   


function showmefullmill() {
    var x = document.getElementById("fullmill");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}   
function showmefullzlut() {
    var x = document.getElementById("fullzlut");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}

Answer 1

您无法将component设为display: none。单击容器时，可以使用某种活动类来获得类似的结果。

display: block

在你的jQuery / JavaScript上：

<div class="thumbnail">
<!-- Any HTML content -->
    <div class="hide_content">
    <!-- Any HTML content which will be hidden by default -->
    </div>
</div>

最后你的CSS：

$(".hide_content").on("click", function() {
  $(this).find(".hide_content").toggleClass("active");
});

这个代码片段是一个变通方法的简单示例。您的.hide_content{ height: 0; transition: all 0.3s ease; } .active{ height: auto; }始终隐藏（使用<div>）。单击height:0;将触发切换div的功能，这将设置元素的高度。

当然，您可以通过多种方式获得相同的结果。

Answer 2

我会这样试试：

1）为所有div提供相同的类和ID（对于所有div都是唯一的）

2）编写执行以下操作的JS函数function display(ID)： - 使用Jquery将指定类的所有div读入数组 - 循环遍历数组 - ＆GT;如果当前ID等于函数参数中设置的ID：将当前div设置为display: block - ＆GT; else：将当前div设置为display: none

3）您还需要一个函数function hide(ID)，它将使用jquery按ID选择div并设置display: none

希望这会让你前进:)

显示块/无，函数java脚本

2 个答案: