页脚从下往上滑动，点击不保持活动状态

Question

我正在尝试在固定底部页面上制作一个全宽的可点击栏，当点击时框会从底部（以前隐藏）向上滑动。

我已经制作了滑动条和栏，但是当我点击栏时，我必须按住按钮才能保持不动我如何让它在点击时保持活动状态，然后点击该栏外的任何地方，然后框它会下降。

如果可能的话，使用纯 CSS。

#slideout p {
  text-align:center;
}
#slideout {
  position:fixed;
  bottom: 0px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  width:100%;
  background:#555;
  height:60px;
}
#slideout_inner {
  bottom:-100px;
  position: fixed;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background:#333;
  color:#fff;
}
#slideout:active{
  bottom: 300px;
}

#slideout:active #slideout_inner {
  bottom: 150px;
    position:fixed;
}

<div id="slideout">
  <p>TEXT</p>
  <div id="slideout_inner">
    [form code goes here]
  </div>
</div>

Answer 1

我相信使用 jQuery 和 'active' class.

可以轻松完成

例如：

$('.toggler').on('click', function() {
  if($('footer').hasClass('active')) {
    $('footer').removeClass('active');
  } else {
    $('footer').addClass('active');
  }
}

至于 'click anywhere to close' 你可以使用：

$(document).on('click', function(e) {
  if (!$(e.target).closest('footer').length) {
    if ($('footer').hasClass('active')) {
      $('footer').removeClass('active');
    };
  }
});

我认为第一个是不言自明的。至于第二个，您基本上捕获了点击事件 (e)，如果该事件发生在页脚以外的任何地方，请删除活动的 class.

来源：https://api.jquery.com/closest/

Answer 2

在纯 CSS 中，您可以使用无线电 button/checkbox 和它们相应的布局来像 click 一样工作。

使用隐藏的复选框和 #slideout 作为其标签。

将您的 active 样式替换为这些：

input[type=checkbox] {
  display: none;
}
input[type=checkbox]:checked + label#slideout {
  bottom: 300px;
}
input[type=checkbox]:checked + label div#slideout_inner {
  bottom: 150px;
  position: fixed;
}

参见下面的示例：

#slideout p {
  text-align: center;
}
#slideout {
  position: fixed;
  bottom: 0px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  width: 100%;
  background: #555;
  height: 60px;
}
#slideout_inner {
  bottom: -100px;
  position: fixed;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background: #333;
  color: #fff;
}
/*
#slideout:active{
  bottom: 300px;
}

#slideout:active #slideout_inner {
  bottom: 150px;
    position:fixed;
}
*/

input[type=checkbox] {
  display: none;
}
input[type=checkbox]:checked + label#slideout {
  bottom: 300px;
}
input[type=checkbox]:checked + label div#slideout_inner {
  bottom: 150px;
  position: fixed;
}

<input type="checkbox" id="slideout_checkbox" />
<label id="slideout" for="slideout_checkbox">
  <p>TEXT</p>
  <div id="slideout_inner">
    [form code goes here]
  </div>
</label>

让我知道您对此的反馈。谢谢！

页脚从下往上滑动，点击不保持活动状态

Footer slides from bottom up, click does not stay active

html

css

onclick

css-selectors

css-transforms