Question

我正在努力使其成为点击按钮的地方，div将滑出，其中包含指向其他网站的链接。我提供了当前的代码，但是当点击按钮时它不会滑出。它会滑动但会出现在按钮下方。

＆＃13;

$('.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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

也许您需要使用绝对位置将元素设置在按钮上方，以便在滑动时覆盖。你可以试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

override func viewDidLoad() 
{
    super.viewDidLoad()
    let doubleTap = UITapGestureRecognizer(target: self, action: "doubleTap")
    doubleTap.numberOfTapsRequired = 2
    doubleTap.numberOfTouchesRequired = 1
    view.addGestureRecognizer(doubleTap)
}
func doubleTap()
{

}

＆＃13;

单击按钮时滑出链接

1 个答案: