Onclick 显示 div 重叠/隐藏其他

Question

我正在尝试实现 3 个可点击的 <div>，它们在点击时展开和隐藏/重叠其他人，同时显示每个点击的 <div> 内部的内容。我现在只有 JQuery。

我最初的问题是，我应该使用什么？ （Flexbox？CSS 动画？React？） 是否有可能在香草 html+css+js 堆栈中没有一个笨拙的过渡？ 我制作了一张图片来说明我想说的话：

Answer 1

仅使用纯 Javascript 即可，您只需为每个 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？
再次单击<div> 后如何隐藏内容？ （如果我理解正确，是“If/Then/Else”的情况）
最后两个问题我觉得是经常被问到的，所以我自己开始搜索，只是展示一下我的进步。

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

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

Ps：我也在研究响应能力，我正在学习它。