单击时切换背景位置

Question

我试图实现这一点是否有一种简单的方法可以在点击事件中切换两个状态之间的背景位置？

我已经构建了一个应该工作的函数..没有得到线索为什么它不会.我花了几个小时试图为我的项目中这么乏味的部分实现这个目标,但这是必要的.

请看一下这个功能:

$("#secondarrow").click(function(){
    /*$(".arrows").toggle( 
    function(){ 
        $(this).css({"background-position":"0px 0px"}); 
    },  
    function(){ 
        $(this).css({"background-position":"0px -30px"}); 
    });*/
    /*$(".arrows").toggleClass(function() {
    if ($(this).is(".arrows")) {
    return ".arrowsup";
    } else {
    return ".arrows";
    }
    });*/
    $('#secondarrow').toggle(function() { 
    $("#arrow2").css('backgroundPosition', '0px -15px'); 
    }, function() { 
    $("#arrow2").css('backgroundPosition', '0px 0px'); 
    });
$("#ukmore").slideToggle(100);
$("#clause").slideToggle(100);
});

它应该做的是,在单击div名称第二个箭头时,它会显示许多子类别,同时从指向下方的箭头切换div子项的背景位置和id#arrow2(表示单击显示更多)向上指向的箭头,该箭头是同一背景图像的一部分(表示点击隐藏子类别).

我已经尝试了许多不同的功能结构,但它们都没有按要求工作,最新的一个 - 没有注释掉的 - 确实改变了背景位置以显示向上的箭头,但它只是在第一次单击AND仅在直接单击#arrow1 div时执行此操作,当我需要它来单击#secondarrow div时来回切换.

请帮忙.

Answer 1

首先 - 你需要多练习处理事件.

.toggle 也是一个事件处理程序,因此您基本上添加了一个新的单击处理程序,以便在单击该项时切换.

你只需要做这样的事情:

$("#secondarrow").toggle(function() { 
    $("#arrow2").css('backgroundPosition', '0px -15px');
    //do more stuff on first click
    }, function() { 
    $("#arrow2").css('backgroundPosition', '0px 0px'); 
    //do more stuff on second click
    });

我无法检查以上内容是否适合您.我建议您将代码放在jsFiddle中以获取stackoverflow问题.

第二件事

最好使用第二个位置创建一个css类,然后绑定一个切换该类的click事件:

$("#secondarrow").click(function(){
   $("#arrow2").toggleClass('position2');
})

并提示:

使用firebug或chrome开发人员工具来调试代码.您可以检查选择器是否正确.另外,请阅读有关选择器缓存的信息,例如.$element=$('.something'); $element.show()