如何使按钮保持按下状态直到再次按下

Question

我有一个按钮可以扩展带有背景图像的部分以显示隐藏的文本，但是我该怎么做才能只按一次按钮而不是按 hover 或按住它？ 然后再按一次返回默认值 state

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="main.css">
        <title>TITLE</title>
    </head>

<body>
    
    
      <div class="mainPic">
         <section>
            
           <header style="text-align: center;">
            <h1>TITLE & info</h1>
           </header>

           <div id="hidden-content">
        
                <label class="bottom-arrow" for="trigger"></label>
              <div id="list">
                <div>hidden text</div>
                <div>hidden text</div>
                <div>hidden text</div>
                <div>hidden text</div>
                <div>hidden text</div>
                <div>hidden text</div>
              </div>
           </div>
                  
          </section>
      </div>
    
    
</body>
</html>

@charset "utf-8";

body{
    background-color: white;
}

.mainPic{
    
    background-image: url("images/background.webp");
    background-repeat: no-repeat;
    
    background-size: cover;
    
    border: 1px solid black;
}

h1{
    
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 200;
    padding:0;
    margin:0;
    font-size: 75px;

    text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
    
}

.bottom-arrow{
    content:'';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 25px solid #6A0136;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    cursor: pointer;
}

/*Custom CSS*/
section{position:relative;}

#hidden-content #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
}

#hidden-content:active #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}

#hidden-content:active .bottom-arrow{
  position:absolute;
  bottom:-25px;
  transition: 0.25s ease-out;
}

..................................................... ...................................

Answer 1

我从来没有找到关于类似这样的纯 CSS 解决方案，因此使用 Javascript 的启动将有助于在hidden-content容器上使用 class 切换不同的 state。 然后，使用新的 class 的存在，您可以编辑 HTML 元素的外观。

换句话说，添加和删除 class 可以让您更新它的外观。

 var trigger = document.querySelector('.bottom-arrow'); trigger.addEventListener('click', function(){ document.getElementById('hidden-content').classList.toggle('active'); });

 body{ background-color: white; }.mainPic{ background-image: url("images/background.webp"); background-repeat: no-repeat; background-size: cover; border: 1px solid black; } h1{ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: 200; padding:0; margin:0; font-size: 75px; text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue; }.bottom-arrow{ content:''; position: absolute; left: 0; right: 0; margin: 0 auto; width: 0; height: 0; border-top: 25px solid #6A0136; border-left: 50px solid transparent; border-right: 50px solid transparent; cursor: pointer; } /*Custom CSS*/ section{position:relative;} #hidden-content #list { max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; } #hidden-content.active #list { max-height: 500px; transition: max-height 0.25s ease-in; } #hidden-content.active.bottom-arrow{ position:absolute; bottom:-25px; transition: 0.25s ease-out; }

 <div class="mainPic"> <section> <header style="text-align: center;"> <h1>TITLE & info</h1> </header> <div id="hidden-content"> <label class="bottom-arrow" for="trigger"></label> <div id="list"> <div>hidden text</div> <div>hidden text</div> <div>hidden text</div> <div>hidden text</div> <div>hidden text</div> <div>hidden text</div> </div> </div> </section> </div>

Answer 2

从技术上讲，您没有按钮。 HTML 标准包含一个button元素，这是人们在谈到 web 页面/web 应用程序中的按钮时所想到的。

您想要根据元素的点击事件切换hidden属性。

 var label = document.querySelector("label"); label.addEventListener("click", function () { document.getElementById("list").toggleAttribute("hidden"); });

 <section> <header style="text-align: center;"> <h1>TITLE & info</h1> </header> <div id="hidden-content"> <label class="bottom-arrow" for="trigger">CLICK ME</label> <div id="list"> <div>hidden text</div> <div>hidden text</div> <div>hidden text</div> <div>hidden text</div> <div>hidden text</div> <div>hidden text</div> </div> </div> </section>

Answer 3

使用带有 label 的复选框允许您使用它的 state。

 body { background-color: white; }.mainPic { background-image: url("images/background.webp"); background-repeat: no-repeat; background-size: cover; border: 1px solid black; } h1 { font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: 200; padding: 0; margin: 0; font-size: 75px; text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue; }.bottom-arrow { content: ''; position: absolute; left: 0; right: 0; margin: 0 auto; width: 0; height: 0; border-top: 25px solid #6A0136; border-left: 50px solid transparent; border-right: 50px solid transparent; cursor: pointer; } /*Custom CSS*/ section { position: relative; } #hidden-content #list { max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; } #trigger { display: none; } #trigger:checked + label + #list { max-height: 500px; transition: max-height 0.25s ease-in; } #trigger:checked + label.bottom-arrow { position: absolute; bottom: -25px; transition: 0.25s ease-out; }

 <div class="mainPic"> <section> <header style="text-align: center;"> <h1>TITLE & info</h1> </header> <div id="hidden-content"> <input type="checkbox" id="trigger"> <label class="bottom-arrow" for="trigger"></label> <div id="list"> <div>hidden text</div> <div>hidden text</div> <div>hidden text</div> <div>hidden text</div> <div>hidden text</div> <div>hidden text</div> </div> </div> </section> </div>