單擊按鈕時滑出鏈接

Question

我試圖使它在單擊按鈕的位置，div將滑出，其中包含指向另一個網站的鏈接。 我已經提供了當前的代碼，但是當單擊按鈕時，它不會滑出。 它會滑動，但會出現在按鈕下方。

 $('.button1').on('click', function() { animateDiv(); }) $(document).keyup(function(e) { if (e.keyCode === 27 && $('.inner').hasClass('visible')) { animateDiv(); } }) function animateDiv() { $('.inner').toggleClass('visible'); $('.inner').animate({ width: 'toggle', }, 350); } 

 .toolbar { position: right; display: inline-block; overflow: hidden; white-space: nowrap; margin: 0px auto; padding: 5px 0px; background-color: skyblue; } .inner { float: right; display: none; } .btn-primary { color: #fff; background-color: #2780E3; border-color: #2780E3; } .btn-lg, .btn-group-lg > .btn { padding: 0.5rem 1rem; font-size: 1.171875rem; line-height: 1.5; border-radius: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='toolbar'> <div> <button class="button1 btn btn-primary btn-lg">Slide it</button> </div> <div class="inner is-hidden"> <a href="http:///www.google.com">Google</a> </div> </div> 

Answer 1

也許您需要使用絕對位置使元素位於按鈕上方，以便在滑動時覆蓋。 您可以嘗試以下方法：

 $('.button1').on('click', function() { animateDiv(); }) $(document).keyup(function(e) { if (e.keyCode === 27 && $('.inner').hasClass('visible')) { animateDiv(); } }) function animateDiv() { $('.inner').toggleClass('visible'); $('.inner').animate({ width: 'toggle', }, 350); } 

 .toolbar { display: inline-block; overflow: hidden; white-space: nowrap; margin: 0px auto; padding: 5px 0px; background-color: skyblue; position:relative; } .inner { display: none; position: absolute; top:0; bottom:0; right:0; left:0; z-index: 2; background-color: skyblue; text-align:center; } .btn-primary { color: #fff; background-color: #2780E3; border-color: #2780E3; } .btn-lg, .btn-group-lg>.btn { padding: 0.5rem 1rem; font-size: 1.171875rem; line-height: 1.5; border-radius: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='toolbar'> <div> <button class="button1 btn btn-primary btn-lg">Slide it</button> </div> <div class="inner is-hidden"> <a href="http:///www.google.com">Google</a> </div> </div>