使用相同的类时如何为多个元素设置动画？

Question

我正在尝试制作多个框，可以在单击 X 时展开 onclick 并再次关闭。首先，关闭 jquery 不起作用，但这不是我正在寻找的主要内容前，我怎样才能优化代码，所以不会变成 400-600 百行相同的，只是针对每个框/元素。

当点击一个框/元素时，它应该展开，里面的内容也应该展开——按照它们出现的顺序。然后它可以再次关闭，您将能够单击具有相同结果的另一个元素 - 使用几乎相同的代码。 我怎样才能让网站知道哪个元素有 bin 点击。

提前谢谢:)

$(document).ready(function(){
  $( ".calendarBox" ).click(function() {
    $(".calendarBox").addClass("calendarBoxOpen").delay(2000);
   	$(".dateTitle").addClass("dateTitleOpen");
    $(".dateMonthBox").addClass("dateMonthBoxOpen");
    $(".closeMonth").addClass("showMonth");
    $(".dateDayBox").addClass("dateDayBoxOpen");
    $(".closeDay").addClass("showDay");
    $(".dateCloseBtnBox").addClass("dateOpenBtnBox");
    $(".closeHr").addClass("showHr");
    $(".dayActivitiesInfo").addClass("dayActivitiesInfoOpned");
    $(".dayInfoTxt_1May").addClass("dayInfoTxt_1MayOpen");
    $(".dayInfoBtnBox_1Maj").addClass("dayInfoBtnBox_1MajOpen");
  }); 
});

$(document).ready(function(){
  $( ".dateCloseBtn" ).click(function() {    		  	
  	$(".dayInfoBtnBox_1Maj").removeClass("dayInfoBtnBox_1MajOpen");
   	$(".dayInfoTxt_1May").removeClass("dayInfoTxt_1MayOpen");
    $(".dayActivitiesInfo").removeClass("dayActivitiesInfoOpned");
    $(".closeHr").removeClass("showHr"); 
    $(".dateCloseBtnBox").removeClass("dateOpenBtnBox");
    $(".closeDay").removeClass("showDay");
    $(".dateDayBox").removeClass("dateDayBoxOpen");
    $(".closeMonth").removeClass("showMonth");
    $(".dateMonthBox").removeClass("dateMonthBoxOpen");
    $(".dateTitle").removeClass("dateTitleOpen");
    $(".calendarBox").removeClass("calendarBoxOpen");
  });
});

.calendarBox { /*This is when closed*/
  width:14.28571428571428%;
  border:0.5px solid #000;
  height:100%;
  transition-duration:1s;
}

.calendarBox:hover {
  background-color:#8abcc2;
}

.calendarBoxOpen { /*This is when opened*/
  width:57.14285714285712%;
} 

.calendarDate {
  
}

.calendarHeader {
  display:flex;
}

.dateTitle { /*This is when closed*/
  margin-left:15px;
  display:none;
  transition:ease-in-out;
  transition-duration:1s;
}

.dateTitleOpen { /*This is when opened*/
  display:block; 
  
}

.dateDayMonthBox {
  width:100%;
}

.dateMonthBox { /*This is when closed*/
  display:inline-flex; 
  float:right;
}

.dateMonthBoxOpen { /*This is when Opened*/
  margin-left:25px;
}

.closeMonth { /*This is when closed*/
  display:none;
}

.showMonth { /*This is when opened*/
  display:block;
}

.dateDayBox { /*This is when closed*/
  display:inline-flex;
  float:left;/*This is when open*/
}

.dateDayBoxOpen { /*This is when opened*/
  float:right;
}

.closeDay { /*This is when closed*/
  display:none;
}

.showDay { /*This is when opened*/
  display:block; 
}

.dateCloseBtnBox { /*This is when date is closed*/
   -webkit-margin-before: 1.33em;
   -webkit-margin-after: 1.33em;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
   font-weight: bold;
   margin-left:25px;
   margin-right:5px;
   display:none;
}

.dateOpenBtnBox { /*This is visible, when date open*/
   display:block;
}

.dateCloseBtn {

}

.closeHr { /*This is when closed*/
  display:none;
}

.showHr { /*This is when opened*/
  display:block;
}

/*====Content of the calendar day=====*/

.dateDayInformationBox {
  
}

.dateDayInformation {
  width:100%;
  display:inline-flex;
  overflow-y:hidden;
}

.dayActivitiesInfo { /*This is when closed*/
  height:18px;
  width:100%; 
  margin-left: 15px;
  padding-left: 10px;
  list-style-type:none;
  border-left:2.5px solid purple;
}

.dayActivitiesInfoOpned { /*This is when opened*/
  height:100%; 
  width:50%;  
  margin-left: 15px;
  padding-left: 10px;
  list-style-type:none;
  border-left:2.5px solid purple;
}

/*====The txt======*/

.dayInfoTitel_1May {
  
}

.dayInfoTxt_1May { /*This is when closed*/
  display:none;
}

.dayInfoTxt_1MayOpen { /*This is when opened*/
  display:block;
}

.dayInfoBtnBox_1Maj { /*This is when closed*/
   display:none;
}

.dayInfoBtnBox_1MajOpen { /*This is when opened*/
   text-align: center;
   margin: auto;
   display:block;
}

<script src="http://code.jquery.com/jquery.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
<div class="calendarBox">
  <div class="calendarDate">
    <div class="calendarHeader">
      <h3 class="dateTitle">Information</h3>
      <div class="dateDayMonthBox">        
          <div class="dateMonthBox"><h4 class="">1</h4><h4 class="closeMonth">.Maj</h4></div>           <div class="dateDayBox"><h4 class="">M</h4><h4 class="closeDay">andag</h4></div>
      </div>      
      <div class="dateCloseBtnBox">
        <div class="dateCloseBtn">close</div>
      </div><!--The clouse btn-->      
    </div>
    <hr class="closeHr">
    <div class="dateDayInformationBox">
      <div class="dateDayInformation">
        <ul class="dayActivitiesInfo">
          <li class="dayInfoTitel_1May">Børnekor - kl.14:40</li>
          <li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
        </ul>
        <div class="dayInfoBtnBox_1Maj">
          <h5>Tilmeldte 23 <span>Icon</span></h5>
          <div>
            <button>Del</button>
            <button>Tilmeld</button>
          </div>
        </div>
      </div>
      <div class="dateDayInformation">
        <ul class="dayActivitiesInfo">
          <li class="dayInfoTitel_1May">Bord og Vin - kl.18:30</li>
          <li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
        </ul>
        <div class="dayInfoBtnBox_1Maj">
          <h5>Tilmeldte 23 <span>Icon</span></h5>
          <div>
            <button>Del</button>
            <button>Tilmeld</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!---------><div class="close">
close
</div>


<div class="calendarBox" onclick="animateDayOpen_1Maj">
  <div class="calendarDate">
    <div class="calendarHeader">
      <h3 class="dateTitle">Information</h3>
      <div class="dateDayMonthBox">        
          <div class="dateMonthBox"><h4 class="">2</h4><h4 class="closeMonth">.Maj</h4></div>           <div class="dateDayBox"><h4 class="">M</h4><h4 class="closeDay">andag</h4></div>
      </div>      
      <div class="dateCloseBtnBox" onclick="animateDayClose_1Maj">
        <div class="dateCloseBtn">X</div>
      </div><!--The clouse btn-->      
    </div>
    <hr class="closeHr">
    <div class="dateDayInformationBox">
      <div class="dateDayInformation">
        <ul class="dayActivitiesInfo">
          <li class="dayInfoTitel_1May">Børnekor - kl.14:40</li>
          <li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
        </ul>
        <div class="dayInfoBtnBox_1Maj">
          <h5>Tilmeldte 23 <span>Icon</span></h5>
          <div>
            <button>Del</button>
            <button>Tilmeld</button>
          </div>
        </div>
      </div>
      <div class="dateDayInformation">
        <ul class="dayActivitiesInfo">
          <li class="dayInfoTitel_1May">Bord og Vin - kl.18:30</li>
          <li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
        </ul>
        <div class="dayInfoBtnBox_1Maj">
          <h5>Tilmeldte 23 <span>Icon</span></h5>
          <div>
            <button>Del</button>
            <button>Tilmeld</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

因此，您有多个要在点击时展开/缩小的框。你可以给所有的盒子一个类——例如boxExpandable，具有初始宽度。然后用户点击boxExpandable - 你应该切换.expanded 具有更高宽度的类。
如果您希望某些内容仅在框展开时显示 - 将其包装在 .showWhenExpanded 类中，如下所示。

$(document).ready(function(){
  $('.expandableBox').on('click', function(){
    $(this).toggleClass('expanded');
  });
});

.box {
  margin-bottom: 10px;
  padding: 15px;
  width: 40%;
  border: solid 5px goldenrod;
  transition: background-color .4s, width .4s;
}

.box:hover {
  background-color: #32cd32;
}

.box.expanded {
  width: 80%;
}

.showWhenExpanded {
  display: none;
}

.box.expanded .showWhenExpanded {
  display: inline-block;    
}

<script src="//code.jquery.com/jquery.js"></script> 

<div class="content">
  <div class="box expandableBox">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p>
  </div>
  <div class="box expandableBox">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p>
  </div>
  <div class="box expandableBox">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p>
  </div> 
</div>

见this codepen