javascript - 如何在折叠时为 div 设置图像然后如果我单击展开需要显示内容？

Question

我有一个具有展开折叠功能的三个 div。如果我展开一个 div，我需要将一些图像设置到另一个 div。如果我回到正常模式，我需要原始内容存在于该 div 中

$("a.expansion-btn").click(function (){
  classes = this.className;
  var divNumber = classes.slice(-1);
   var toGetId = "#div-"+divNumber;
  if ($(toGetId).hasClass("expanded-div")){
   $(".normal-div").removeClass("compressed-div");
   $(".normal-div").removeClass("expanded-div");
  }
  else{
   $(".normal-div").removeClass("compressed-div");
   $(".normal-div").removeClass("expanded-div");
   $(".normal-div").addClass("compressed-div");
   $(toGetId).removeClass("compressed-div");
   $(toGetId).addClass("expanded-div");    
  }  
});

*{
  box-sizing:border-box;
}
.contenth1{
  height:20%;
}
.contenth2{
  height:70%;
}
.container{
  margin:0;
  padding:0;
  width:100%;
  height:400px;
}
.normal-div{
  width:33.33%;
  height:100%;
  position:relative;
  border:2px solid black;
  float:left;
}
.expanded-div{
    width:80%;
}
.compressed-div{
  width:10%;
}
#div-1{
   
}
#div-2{
   
}
#div-3{
  
}
a.expansion-btn{
  position:absolute;
  top:10px;
  right:10px;
  font-weight:bold;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="normal-div" id="div-1">
    <div class="contenth1">
      <a class="expansion-btn exp-1">click</a>
    </div >
    <div class="contenth2">one</div>
    </div>
  <div class="normal-div" id="div-2">
  <div class="contenth1">
      <a class="expansion-btn exp-2">click</a>
    </div>
    <div class="contenth2">two</div>
    </div>
  <div class="normal-div" id="div-3">
    <div class="contenth1">
      <a class="expansion-btn exp-3">click</a>
    </div>
    <div class="contenth2">three</div>
    </div>
  </div>

例子:-在正常模式下工作正常

示例 1:-在展开 div 其他两个 div 时，我需要隐藏内容并显示一些字形图标，比如这张图片

Answer 1

只需将一些背景图像添加到 .compressed-div 类。和 display:none 到 .compressed-div .contenth2

此外，我改进了用于选择当前父级的选择器，这样您就不必依赖 id 和 counter

$("a.expansion-btn").click(function (){
  var thisDiv = $(this).closest('.normal-div');
  if (thisDiv.hasClass("expanded-div")){
   $(".normal-div").removeClass("compressed-div");
   $(".normal-div").removeClass("expanded-div");
  }
  else{
   $(".normal-div").removeClass("compressed-div");
   $(".normal-div").removeClass("expanded-div");
   $(".normal-div").addClass("compressed-div");
   $(thisDiv).removeClass("compressed-div");
   $(thisDiv).addClass("expanded-div");    
  }  
});

*{
  box-sizing:border-box;
}
.contenth1{
  height:20%;
}
.contenth2{
  height:70%;
}
.container{
  margin:0;
  padding:0;
  width:100%;
  height:400px;
}
.normal-div{
  width:33.33%;
  height:100%;
  position:relative;
  border:2px solid black;
  float:left;
}
.expanded-div{
    width:80%;
}
.compressed-div{
  width:10%;
  background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCN90DSaAG4pFAZaMxlsrfTUAebqMI4ZOTwjCCDvoVL7caW9mj");
}
.compressed-div .contenth2{
 display:none;
}
#div-1{
   
}
#div-2{
   
}
#div-3{
  
}
a.expansion-btn{
  position:absolute;
  top:10px;
  right:10px;
  font-weight:bold;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="normal-div" id="div-1">
    <div class="contenth1">
      <a class="expansion-btn exp-1">click</a>
    </div >
    <div class="contenth2">one</div>
    </div>
  <div class="normal-div" id="div-2">
  <div class="contenth1">
      <a class="expansion-btn exp-2">click</a>
    </div>
    <div class="contenth2">two</div>
    </div>
  <div class="normal-div" id="div-3">
    <div class="contenth1">
      <a class="expansion-btn exp-3">click</a>
    </div>
    <div class="contenth2">three</div>
    </div>
  </div>