フッターを下から上にスライドさせても、クリックが有効になっていない

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

、あなたははそれがclickように動作するように、ラジオボタン/チェックボックスとそれらに対応するレイアウトをを使用して行うことができます。

1. ラベルとして#slideoutを使用してください。

2. はこれらにあなたのactiveスタイルを置き換えます。私はこれについてあなたの意見を知ってみましょう

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

   ：

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

は、以下の例を参照してください。ありがとう！

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だと思います。 2つ目は、基本的にクリックイベント（e）を取得し、フッター以外の場所でイベントが発生した場合は、アクティブなクラスを削除します。

出典：純粋なCSSでhttps://api.jquery.com/closest/