单击时切换背景位置

Question

我正在努力实现这个Is there an easy way to toggle background position between two states on click event?

我已经构建了一个应该工作的函数.. 不知道为什么它不会。对于我的项目中如此乏味的部分，我花了几个小时试图实现这一点，但这是必要的。

请看一下这个函数：

$("#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 名称的第二个箭头时，它会显示许多子类别，并且同时切换具有 id #arrow2 的 div 子项的背景位置从指向下方的箭头（表示点击显示更多）到作为同一背景图像一部分的向上箭头（表示点击隐藏子类别)。

我尝试了许多不同的函数结构，但它们都没有按要求工作，最新的一个 - 没有被注释掉的 - 确实改变了背景位置以显示向上的箭头，但它只是这样做在第一次点击时，只有在直接点击 #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类，然后绑定一个点击事件来切换类：

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

还有一个提示：

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