点击隐藏和显示分区答案

【问题标题】：Click to hide and show the division点击隐藏和显示分区
【发布时间】：2021-07-17 08:51:12
【问题描述】：

我在页脚有一个带有 HIDE 按钮的粘性广告，
当我点击 HIDE 时我想要 .stickyads 内容应该通过向下滑动来隐藏，但是隐藏，但应该会出现，以便当我再次单击时，.stickyads 内容应该会通过向上滑动出现。

CSS：

@media (max-width: 800px) {   
     .stickyads { 
      position: fixed; 
      bottom: 0px; 
      left: 0;
    } 
     
    .stickyadsHide { 
      width: 30px; 
      height: 30px; 
      display: flex;
      position: absolute; 
      right: 0px;
      top: -30px; 
    }
     
    .stickyads .stickyadsContent { 
      overflow: hidden; 
      display: block;
      position: relative;
      width: 100%;
    }
}

HTML 部分：

<div class='stickyads'>
   <div class='stickyadsHide' >
      <span>HIDE</span>
   </div>
   <div class='stickyadsContent'>
      Content Here...
   </div>
</div>

【问题讨论】：

...有什么问题？
javascript代码在哪里？

标签： javascript css show-hide

【解决方案1】：

button = document.querySelector('.stickyadsHide');
adCont = document.querySelector('.stickyadsContent');
hide = document.querySelector('.hide');
show = document.querySelector('.show');


button.addEventListener("click", () => {
    adCont.classList.toggle('visbility');
    hide.classList.toggle('visbility');
    show.classList.toggle('visbility');
});

.stickyadsHide {
    width: 50px;
    height: 50px;
}

.btn {
    position: absolute;
}

.stickyadsContent,
.btn {
    opacity: 0;
    transition: opacity 0.5s;
}

.visbility {
    opacity: 1;
    transition: opacity 0.5s;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    
    <div class='stickyads' id='removeads'>
        <div class='stickyadsHide'>
            <span class="btn hide visbility">HIDE</span>
            <span class="btn show">SHOW</span>
        </div>
        <div class='stickyadsContent visbility'>
            Content Here...
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

【讨论】：

而不是不透明度 1 和 0，我用显示块和无替换，因为它留下了我不需要的空间。顺便谢谢你！成功了！....
transition: display 0.5s;
替换不透明度以显示。
让我们continue this discussion in chat.
我得到了解决方案。

【解决方案2】：

我认为这就是您要寻找的。 slideToggle

HTML

 <div class='stickyads'>
   <div class='stickyadsHide' >
      <span>HIDE</span>
   </div>
   <div class='stickyadsContent'>
      Content Here...
   </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

CSS

.stickyads { 
  position: fixed; 
  bottom: 0px; 
  left: 0;
} 
 
.stickyadsHide { 
  width: 30px; 
  height: 30px; 

}
 
.stickyads .stickyadsContent { 
  overflow: hidden; 
  display: block;
  position: relative;
  width: 100%;
}

jQuery

$('.stickyadsHide').click(function() {
  $('.stickyadsContent').slideToggle();
});

Check this link

【讨论】：

它有效，但是如果我不想要 Jquery 怎么办？
@RiyaSingh 检查此链接jsfiddle.net/sinju/6gd9shka/5
谢谢你，但那是显示和隐藏，我想要隐藏和显示