javascript - 单击按钮时滑出链接

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>