Question

你好我点击了一个我想要的两个按钮，它滑出来显示更多信息。单击一个按钮时，两个按钮都会滑出。我将第二个按钮类更改为button2和inner2并将javascript加倍并将其中的类更改为button2和inner2，但这确实让事情变得奇怪。

<a class="text button1 btn btn-primary btn-lg">Learn more<a class="link inner is-hidden btn btn-primary btn-lg" href="#">Movie Data</a><a class="link inner is-hidden btn btn-primary btn-lg" href="#">Full Trailer</a><a class="link inner is-hidden btn btn-primary btn-lg" href="#"More Reviews</a><a class="link inner is-hidden btn btn-primary btn-lg" href="#">Photos</a></a>

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

Answer 1

在animateDiv中，您指的是.inner，它将匹配两个按钮，或者至少会匹配该类的每个元素。除非你以某种方式指定它所引用的外部按钮，否则它将无效。

尝试将按钮传递给您的函数，然后确定范围：

$('.button1').on('click', function() {
  animateDiv($(this));
})

function animateDiv(button) {
  $('.inner', button).toggleClass('visible');
  $('.inner', button).animate({
    width: 'toggle',
  }, 0);
}

但是，你的其他代码仍然存在问题，因为它无法知道你在整个文档的密钥上引用了哪个按钮。没有它的两种方法的唯一方法是将键盘的范围也放在按钮上：

$('.button1').keyup(function(e) {
  if (e.keyCode === 27 && $('.inner', $(this)).hasClass('visible')) {
    animateDiv($(this));
  }
})

编辑：

实际上，我认为您的HTML格式不同。看起来很奇怪。还有按钮2吗？为什么.inner内有.button1个这么多？

我首先想到你在.inner div中有几个.button123 div的案例。很难分辨出什么时候都在一条线上。但现在想知道你的HTML是否被破坏或者你的问题中缺少什么东西？

需要滑出按钮才能单独工作。单击一个按钮时，都执行该任务。

1 个答案:

编辑：