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

在纯CSS中，可以使用单选按钮/复选框及其相应的布局来执行此操作，就像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;
}

见下面的例子：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

Answer 2

我相信这很容易使用jQuery并使用＆＃39; active＆＃39;类。

例如：

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

至于点击任何地方关闭＆＃39;你可以使用：

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

我认为第一个是非常自我解释的。至于第二个，你基本上捕获click事件（e），如果事件发生在除页脚之外的任何地方，则删除活动类。

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

页脚从下向上滑动，单击不会保持活动状态

2 个答案: