Question

一旦点击某些元素，我就试图将页面设置为特定点到目前为止，我已经能够通过单击按钮将页面设置为div的顶部;我切换按钮的类别，为关闭按钮设置另一个图像当我在单击具有新类.btn_close的按钮时尝试将页面设置为顶部时，会出现问题。
我认为我的代码中存在错误，就好像它不能识别新类一样



$("#content").hide();
$("[class^=btn]").click(function () {
    $(this).toggleClass("btn_open btn_close")
    if($(this).hasClass("btn_close")){
      $(this).text("close")
    }else{
      $(this).text("open")
    }
   $("#content").toggle("slow");
    return false;
}); 


$("#btn").click(function() {
    $('body').animate({
    scrollTop: $("#btn").offset().top
    }, 800);
});

$(".btn_close").click(function ()   {
    $('body').animate({
    scrollTop: $("#header").offset().top
    }, 800);
});

$("#content").hide(); $("[class^=btn]").click(function () { $(this).toggleClass("btn_open btn_close") if($(this).hasClass("btn_close")){ $(this).text("close") }else{ $(this).text("open") } $("#content").toggle("slow"); return false; }); $("#btn").click(function() { $('body').animate({ scrollTop: $("#btn").offset().top }, 800); }); $(".btn_close").click(function () { $('body').animate({ scrollTop: $("#header").offset().top }, 800); });

我做了这个小提琴：http://jsfiddle.net/weberjavi/wBkf9/5/

非常感谢你！

EDITED！（25/04/2014）
在第一个问题中，我试图简化我的代码，事实是我并没有尝试在单词open和close之间切换（所以我实际上并没有使用if / else语句中的代码块）两张图片我的代码应该看起来更像这样：

$("[class^=arrow]").click(function () {
    $(this).toggleClass("arrow_down arrow_up");
}); 


$("#content_section_1").hide();
$("#btn_1").click(function () {
    $("#content_section_1").toggle("slow");
    return false;
}); 

$("#content_section_2").hide();
$("#btn_2").click(function () {
    $("#content_section_2").toggle("slow");
    return false;
}); 

$("#btn_1").click(function() {
    $('html, body').animate({
    scrollTop: $("#section_1").offset().top
    }, 800);
});

$("#btn_2").click(function() {
    $('html, body').animate({
    scrollTop: $("#section_2").offset().top
    }, 800);
});

我有几个隐藏内容的部分，我希望每次关闭部分时整个页面都会滚动到标题的顶部。
我做了另一个小提琴：http://jsfiddle.net/weberjavi/ACH5L/（我不知道如何在小提琴中显示按钮）。
我应该创建一个变量来存储类切换的信息，但我是JS世界的新手，真的不知道如何达到这一点。
P.S：G.Mendes非常感谢你的帮助，并为这个误解感到抱歉。

Answer 1

$('.btn_close').click()事件的问题是元素在声明的那一刻不存在，因此事件不绑定到元素，因为它仍将接收该类。解决方法是改为调用函数：

//was changed so  the animation wouldn't interfere in the 
//scrollTop animation upon close
function open() {
  $('body, html').animate({ //body & html to work in all browsers
    scrollTop: $("#btn").offset().top
  }, 800);
}

//changed to be able to be called
function close(){
  $('body, html').animate({ //body & html to work in all browsers
    scrollTop: $("#header").offset().top
  }, 800);
}

替换最后2个点击事件，并更改此块：

if($(this).hasClass("btn_close")){
  $(this).text("close");
  open(); //added line
}else{
  $(this).text("open");
  close(); //added line
}

FIDDLE： http://jsfiddle.net/wBkf9/10/

修改问题编辑有一个类似的问题，我们需要检查该部分的当前状态，无论是打开还是关闭，或者关闭事件永远不会被触发，是的，如果有＆＃39;它将始终设置为部分偏移的动画。不检查：

$("#btn_1").click(function() { //check if its closed to fire close event if($(this).hasClass('arrow_down')) close(); else{ $('html, body').animate({ scrollTop: $("#section_1").offset().top }, 800); } }); function close(){ $('html, body').animate({ scrollTop: $("#header").offset().top }, 800); }

FIDDLE 2： http://jsfiddle.net/ACH5L/2/

使用切换类为div设置动画。 jQuery的

1 个答案: