Question

我有一个“滑出”div，我正在通过CSS定位隐藏/显示，并使用jquery来切换设置div的隐藏/显示状态的类。

这一切都很有效。我现在要做的是在页面上有更多的链接更改类以显示div，并将页面向下跳到它。

这就是我所拥有的：

$('a[href="#request-trial"]').click(function () {
  $("#request-trial").toggleClass("on off");
});

问题是它首先跳到锚点，然后改变类，所以当它“关闭”时它跳到div的位置而不是当它“开启”时 - 这是否有意义？有没有人有任何建议？

添加一些额外信息：

HTML：

<section class="form-popup on" id="request-trial">
<div class="container">
<h1>Let's Talk more!</h1>
<p>Have a project in mind or have an organizational challenge you need assistance in tackling? Get in touch... we’ll discuss ways that the Beyond Nines team could help.</p>

<a class="close">Close</a>
</div>
</section>

链接类似于：

<a href="#request-trial">Sign up</a>

Css：

.form-popup,
.form-popup.on {
position: absolute;
height: 500px;
z-index: 0;
bottom: 0px;
opacity: 1;
 }

 .form-popup.off {

 bottom: -580px;
 opacity: 0;

  }

Answer 1

试试这个：

http://jsfiddle.net/Ag98N/2/

var documentBody = (($.browser.chrome)||($.browser.safari)) ? document.body : document.documentElement;
      $('a[href="#request-trial"]').click(function (e) {
         e.preventDefault();
         var $targetElem = $("#request-trial")
         $targetElem.toggleClass("on off");
          if($targetElem.is('.on'))
         $(documentBody).animate({scrollTop: $targetElem.offset().top}, 50);
      });

Answer 2

这是我的代码

$('a[href="#request-trial"]').click(function(evt) {
  evt.preventDefault();
  var target = $("#request-trial");
  target.toggleClass("on off");
  if (target.length > 0 && target.hasClass("on"))
  {
     $("html, body").animate({
         scrollTop: target.offset().top - $(window).height()
     }, 500);
  } 
});

如何使用Jquery在指定的操作后执行默认链接操作？

2 个答案: