主页 / 问题 / 761936
Accepted
Randall
Asked:2020-12-22 20:49:23 +0000 UTC2020-12-22 20:49:23 +0000 UTC

单击时加减的平滑动画

  • 772

$(".summary").click(function(){
	if ($("#hotel-facilities").is(":hidden")){
		$("#hotel-facilities").slideDown("slow");
		$(".summary:before").css({"-webkit-transform":"translate(-50%,-50%) rotate(0)"});
}	else {
	$("#hotel-facilities").hide("slow");
	$(".summary:before").css({"-webkit-transform":"translate(-50%,-50%) rotate(-90)"});
}

});
.is-hidden {
	display: none;
}
.summary {
	font-size: 14px;
	padding: 14px 40px;
	position: relative;
	list-style-type: none;
	margin: 0;
	font-weight: 400;
}
.summary:before {
	/*-webkit-transform: translate(-50%,-50%) rotate(0);*/
	transform: translate(-50%,-50%) rotate(-90deg);
    will-change: translate,rotate;
}
.summary:after {
	transform: translate(-50%,-50%);
    will-change: translate,opacity;

}
.summary:after,
.summary:before {
	content: "";
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background-color: #37454d;
	display: block;
	position: absolute;
	top: 50%;
	transition: all .2s ease-in-out;
	opacity: 1;
	left: 21px;
	contain: strict;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="details">
	<h4 class="summary" role="tab" aria-expanded="false" aria-owns="hotel-facilities" aria-controls="hotel-facilities" tabindex="0">Hotel facilities</h4>
  <div id="hotel-facilities" class="is-hidden">
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">24-hour reception (4923)</span>
      </label>
    </div>
  </div>
</section>

大家好，有个任务是让你点击的时候，加号顺利变成减号，一切准备就绪，几乎只需要在 点击的帮助下给想要的元素添加想要的样式jquery，我就卡在这里了。.summary:beforetransform: translate(-50%,-50%) rotate(-90deg);-webkit-transform: translate(-50%,-50%) rotate(0);

jquery

1 个回答

  1. Best Answer

    在这个例子中，我们不是通过 jquery 访问 :before 伪元素，而是添加一个改变其位置的类。

    $(".summary").click(function() {

    if ($("#hotel-facilities").is(":hidden")) {
    
		    $("#hotel-facilities").slideDown("slow");
		    $(".summary").addClass("open");
        
    }else {

        $("#hotel-facilities").hide("slow");
	       $(".summary").removeClass("open");
    
    }

});
    .is-hidden {
	display: none;
}
.summary {
	font-size: 14px;
	padding: 14px 40px;
	position: relative;
	list-style-type: none;
	margin: 0;
	font-weight: 400;
}
.summary:before {
	/*-webkit-transform: translate(-50%,-50%) rotate(0);*/
	transform: translate(-50%,-50%) rotate(-90deg);
    will-change: translate,rotate;
}
.summary:after {
	transform: translate(-50%,-50%);
    will-change: translate,opacity;

}
.summary.open:before{ /* добавочный класс */
    transform:translate(-50%,-50%) rotate(-0deg);
    width:0;
}
.summary:after,
.summary:before {
	content: "";
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background-color: #37454d;
	display: block;
	position: absolute;
	top: 50%;
	transition: all .2s ease-in-out;
	opacity: 1;
	left: 21px;
	contain: strict;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="details">
	<h4 class="summary" role="tab" aria-expanded="false" aria-owns="hotel-facilities" aria-controls="hotel-facilities" tabindex="0">Hotel facilities</h4>
  <div id="hotel-facilities" class="is-hidden">
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">24-hour reception (4923)</span>
      </label>
    </div>
  </div>
</section>

    • 1

相关问题