Question

我正在尝试实现3个可点击的<div>，它们在点击时会展开和隐藏/重叠，同时显示每次点击的<div>的内容。到目前为止，我只有JQuery。

我最初的问题是，我应该使用什么？（Flexbox？CSS动画？React？）是否可以在原始html + css + js堆栈中进行轻松转换？我做了一张图片来说明我要说的话：

Answer 1

仅通过使用纯Javascript就可以了，您所要做的就是向每个div添加一个click事件，并且当单击一个div时，您向其他两个div发出yourDivName.setAttribute("style", "display: block");并发出yourDivName.setAttribute("style", "display: none");。然后，对每个重复此过程。显然将每个都放在function yourFunctionName(){ //Enter logic here }

中

您的过程应该首先获取每个div并将其放入变量，然后根据您希望对div进行的操作执行上述代码。我希望这可以帮助我知道您是否希望我为您制作Javascript：）

Answer 2

首先，在stackoverflow上提问时，应在问题中编写脚本。因为我们必须看到您拥有什么代码。

关于您的问题，有很多选择。如果要使用jQuery：

HTML：

<div class="group"></div>
<div class="group"></div>
<div class="group"></div>

JavaScript：

$('.group').on('click', function(){
    $('.group').hide();
    $(this).show();
});

如果要使用CSS制作，可以执行以下操作：

HTML：

<div class="group"></div>
<div class="group"></div>
<div class="group"></div>

CSS：

.group{
    display: none;
}
.group:active{
    display: block;
}

如果要制作一些动画，可以使用CSS transition

Answer 3

我正在回答自己的问题，向您展示我的进步。这将极大地开始遵循您的建议。
（最后是Jsfiddle）。

HTML

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StackCode</title>
    <link rel="stylesheet" href="dummy.css" />  
</head>
<body>
<header>    
</header>
<section class="section">   
        <div class="service-box">
                <div class="service-story">                 
                            <div> <h1> Title </h1> </div>
                <img class="img-left" src="https://via.placeholder.com/250x700">
                            <div class="service-story-expand">
                                <h1>TITLE</h1>
                                <p>Sample text</p>
                                <img src="https://via.placeholder.com/100">
                            </div>                                      
                 </div> 
                 <div class="service-art">
                            <div> <h2> Title2 </h2></div>
                            <img class="img-middle" src="https://via.placeholder.com/250x700"> 
                            <div class="service-art-expand">
                                <h1>TITLE</h1>
                                <p>Sammple text</p>
                            </div>
                 </div> 
                 <div class="service-motion">
                            <div> <h2> Title3 </h2></div>
                            <img class="img-right" src="https://via.placeholder.com/250x700"> 
                            <div class="service-motion-expand">
                                <h1>TITLE</h1>
                                <p>Sammple text</p>
                            </div>
                 </div> 
            </div>
</section>      
<script src="jquery-3.4.1.min.js"></script>
<script src="dummy.js"></script>
</body>
</html>

CSS

*
{
    margin:0px;
    padding:0px;
}

html { 
    overflow-x :hidden; 
    background: black;
}

header
{
  height:20px;
    overflow: hidden;
    background-color: black;
    padding: 45 0 0 0;
    z-index: 0;
    width: 100%;
}

.section{
    width: 100%;
    background:grey;
    margin: auto;
}

.service-box{
  overflow: hidden;
    width: 90%;
    height: auto;
    margin:auto;
    display: flex;
    justify-content: space-evenly;
}

.service-story{
    height: auto;
    overflow: hidden;
    flex:1;
    order: 1;
    transition: flex .3s ease-out;
}

.service-story.clicked{
    background:white;
    height: auto;
    flex:6;
    transition: flex .3s ease-out;
}

.service-story-expand{
    display: none;
}

.service-art{
    overflow: hidden;
    flex:1; 
    transition: flex .3s ease-out;
    order: 2;
}

.service-art.clicked{
    background:white;
    flex:6;
    transition: flex .3s ease-out;
}

.service-art-expand{
    display: none;
}

.service-motion{
    overflow: hidden;
    flex:1; 
    transition: flex .3s ease-out;
    order: 3;
}

.service-motion.clicked{
    background:white;
    flex:6;
    transition: flex .3s ease-out;
}

.service-motion.clicked img{
    float: left;
}

.service-motion-expand{
    display: none;
}

.service-story.clicked img{
    width:auto;
  height:auto;
}

Js + Jquery

$('.service-story').on('click', function(){
    $(this).toggleClass('clicked');
    $(this).show();
    $('.service-story-expand').show();
});

$('.service-art').on('click', function(){
    $(this).toggleClass('clicked');
    $(this).show();
    $('.service-story-expand').show();  
});

$('.service-motion').on('click', function(){
    $(this).toggleClass('clicked');
    $(this).show();
    $('.service-motion-expand').show();
});

我选择了flexbox的解决方案。这不是我一直在寻找的东西，但是可以解决问题。现在，我遇到的问题如下。

如何将首先隐藏而不是隐藏在我图像旁边的内容放置在我的图像旁边？
一个打开时如何关闭其他div？
再次单击<div>后如何隐藏内容？（如果我理解正确，就是“如果/然后/否则”的情况）
我认为最后两个问题经常被问到，所以我将自己开始搜索，只显示我的进度。

再次感谢您的时间，希望我在格式化方面做得更好。

这是一个jsfiddle。 https://jsfiddle.net/7oa28cg4/

Ps：我也在学习响应能力。

Onclick显示div重叠/隐藏其他

3 个答案: