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名称第二个箭头时，它会显示多个子类别，同时切换div子项的背景位置，其ID为＃arrow2从指向下方的箭头（表示点击以显示更多）到指向上方的箭头，该箭头是同一背景图像的一部分（表示点击隐藏子类别）。

我尝试了许多不同的功能结构，但没有一个按要求工作，最新的一个 - 没有注释掉的 - 确实改变了背景位置以显示向上的箭头但它只是这样做第一次点击时只有当直接点击＃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()

单击时切换背景位置

1 个答案: