Question

我正在尝试为页脚设置动画，以便单击该页脚时它会逐渐显示信息并隐藏以前的信息。要将页脚恢复到原始状态，我使用的是一个图标，当您单击该图标时，页脚将返回其原始大小并再次显示时间信息。

我尝试使用jquery更改CSS并添加/删除类，但仍然无法正常工作。

function showTimes(){
  $(".footer").css("height", "40%");
  $("#timeDiv").addClass( "hidden" );
  $(".fa-times-circle").removeClass( "hidden" );
}

function hideTimes(){
  $("#timeDiv").removeClass( "hidden" );
  $(".fa-times-circle").addClass( "hidden" );
  $(".footer").animate({height:'10%'},400);
}

.footer {
  background-color: #211f20;
  width: 70%;
  height: 10%;
  right: 10px;
  position: fixed;
  bottom: 0px;
  z-index: 1;
  opacity: 0.7;
  cursor: pointer;
}

.footer:hover {
  height: 12.5%; !important;
  webkit-transition:height 0.5s; /* Safari */ !important;
  transition:height 0.5s; !important;
}

.time {
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 2vh;
  position: absolute;
  bottom: 20%;
  width: 100%;
  text-align: center;
  display: inline-block;
}

.fa-times-circle {
  color: white;
  font-size: 5vh;
  position: absolute;
  top: 0;
  right: 0;
  margin: 20px 20px 0px 0px;
}

{{1}}

我希望单击按钮时可以隐藏该按钮，并且可以再次以页脚的原始大小显示“ timeDiv”。

Answer 1

$(".footer").on("click",function(){
  $(".footer").css("height", "40%");
  $("#timeDiv").addClass( "hidden" );
  $(".fa-times-circle").removeClass( "hidden" );
})

$(".fa-times-circle").on("click",function(){
 $("#timeDiv").removeClass( "hidden" );
  $(".fa-times-circle").addClass( "hidden" );
  $(".footer").animate({height:'10%'},400);
})

.footer {
  background-color: #211f20;
  width: 70%;
  height: 10%;
  right: 10px;
  position: fixed;
  bottom: 0px;
  z-index: 1;
  opacity: 0.7;
  cursor: pointer;
}

.time {
  background: pink;
  font-family: 'Montserrat', sans-serif;
  height: 100%;
  width: 20%;
  position: absolute;
  top: 0%;
  left: 50%;
  text-align: center;
  display: inline-block;
}

.time.hidden {
  display: none;
}

.fa-times-circle {
    background: #8BC34A;
    font-size: 5vh;
    position: absolute;
    top: 0px;
    right: 0px;
    margin: 20px 20px 0px 0px;
    z-index: 99999999999;
    width: 30px;
    height: 30px;
}

.fa-times-circle.hidden {
   display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div class="footer">
    <i class="fas fa-times-circle hidden"></i>
    <div id="timeDiv" class="time">My time</div>
  </div>

这是您需要的吗？

Answer 2

关于它为什么不起作用的问题很少。

.footer:hover应该是.footer:active
上面的属性有两个分号-!important之前和之后的每行
showTimes()将始终执行，即使单击该图标以执行hideTimes()

此外，最好将图标和#timeDiv包装在容器div中。

下面您可能会看到我的解决方案。

关键要点是：

stopPropagation()在hideTimes()函数上
修复CSS中的分号问题
添加包装器div，同时将.hidden类从图标更改为包装器，并更新每个函数以显示/隐藏包装器上的类。

function showTimes(){
  $(".footer").css("height", "40%");
  $(".time__container").removeClass( "hidden" );
}

function hideTimes(event) {;
    event.stopPropagation();
    
  $(".time__container").addClass( "hidden" );
  $(".footer").animate({height:'10%'},400);
}

/* Added `.hidden` class to simulate your 3rd party css */
.hidden {
    display: none;
}

.footer {
  background-color: #211f20;
  width: 70%;
  height: 10%;
  right: 10px;
  position: fixed;
  bottom: 0px;
  z-index: 1;
  opacity: 0.7;
  cursor: pointer;
}

.footer:active {
  height: 12.5% !important;
  webkit-transition:height 0.5s /* Safari */ !important;
  transition:height 0.5s !important;
}

.time {
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 2vh;
  position: absolute;
  bottom: 20%;
  width: 100%;
  text-align: center;
  display: inline-block;
}

.fa-times-circle {
  color: white;
  font-size: 5vh;
  position: absolute;
  top: 0;
  right: 0;
  margin: 20px 20px 0px 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
		<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
	</head>
	<body>
		<div class="footer" onclick="showTimes()">
		    <div class="time__container hidden">
                <i class="fas fa-times-circle" onclick="hideTimes(event)">X</i>
                <div id="timeDiv" class="time">lorem ipsum</div>
            </div>
        </div>
	</body>
</html>

无法在页脚和图标上添加/删除类

2 个答案: