2

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

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

请看一下这个函数：

$("#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 名称第二个箭头时，它会显示许多子类别，同时从指向下方的箭头（表示单击显示更多）指向一个向上的箭头，该箭头是同一背景图像的一部分（表示单击以隐藏子类别）。

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

请帮忙。

4

1 回答 1

5

首先 - 你需要更多地练习处理事件。

.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()

于 2012-09-27T17:33:31.370 回答