頁腳從下向上滑動，點擊不會保持活動狀態

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上班吧做。

1. 使用隱藏複選框和#slideout作爲其標籤。

2. 更換你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>

讓我知道你對這個意見。謝謝！

Answer 2

我相信這是使用jQuery和使用 '活躍' 類很容易做到。

例如：

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

至於 '點擊任何地方關閉' 您可以使用：

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

我第一個想到的是很好的自我explantory。至於第二個，你基本上捕獲點擊事件（e），如果事件發生在除了頁腳之外的任何地方，則刪除活動類。

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