是否有一种简单的方法可以在点击事件时在两种状态之间切换背景位置? [英] Is there an easy way to toggle background position between two states on click event?

问题描述

我有一个下拉价格清单，分为几小块以便于查看，提供了几种服务，有些服务分为子类别，用户可以点击带有向下箭头的按钮，单击该按钮时，将显示slideToggle的另一级别的子类别.箭头按钮停留在底部，因此它们可以在准备好时隐藏子类别.

我希望将箭头从隐藏子类别时的向下箭头更改为显示子类别时的向上箭头.我已经准备好在一个png中同时包含两个箭头状态的图像，我只需要一个命令/一组命令即可在隐藏/显示子类别时在状态之间切换箭头.

该箭头位于HTML内，作为.arrows div的背景图像.

<div class="morebutton" id="firstarrow">

    <div class="arrows">

    </div>

</div>

这是CSS:

.morebutton{
width:220px;
height:8px;
border:outset 1px #ddd;
/*margin-bottom:5px;*/
margin-left:auto;
margin-right:auto;
margin-top:0px;
background:#ddd;
border-radius:25px;
cursor:pointer;
overflow:hidden;
}

.morebutton:hover{
background:#eee;
height:15px;        
}

.arrows{
width:20px;
height:15px;
margin:0px auto;
background:url(images/morearrows.png) no-repeat 0px 0px;
}

这是元素上的当前jQuery:

$("#firstarrow").click(function(){
    $("#londonmore").slideToggle(100);
});
//this reveals the sub-categories in a table called #londonmore

这是我尝试过的(在上面的函数中):

$(this).toggle( 
    function(){ 
        $(".arrows").css({"background-position":"0px"}); 
    },  
    function(){ 
        $(".arrows").css({"background-position":"10px"}); 
});

我尝试过尝试改变背景位置的变化量，但是它所做的只是稍微移动箭头，它在第一次单击时不会移动，也不会移动到我想要的位置，而且不会继续隐藏子类别.

解决方案

由于您尚未发布任何代码，因此此答案将变得有些笼统，但您会在.slideToggle().使用它来执行 .css()

您只需要检查您所处的状态，即可设置向右箭头.

例如:

    $('#button1').slideToggle('slow',function() {
        if ( ... ) {
            $('#arrow1').css('background-position','?px ?px');
        } else {
            $('#arrow1').css('background-position','?px ?px');
        }
    });

您必须填补空白-否则您可以通过其他方式实现回调，但是如果您要在slideToggle触发时执行css更改，则可以执行任何操作，使用回调是可行的方式. /p>

I have a drop down price list broken down into bite size chunks for easier viewing, there are several services being offered and some services break down into sub-categories, the user can click on a button with a little arrow pointing down, on clicking the button another level of sub categories is slideToggle revealed. The arrow button stays at the bottom so that they can hide the sub categories when ready.

I was hoping to change the arrow from pointing down when hiding sub-categories, to up when showing them. I already have an image prepared with both arrow states in one png, I just need a command/set of commands that will toggle the arrow between states when hiding/showing the sub categories.

The arrow lies within this HTML as a background image for the .arrows div.

<div class="morebutton" id="firstarrow">

    <div class="arrows">

    </div>

</div>

This is the CSS:

.morebutton{
width:220px;
height:8px;
border:outset 1px #ddd;
/*margin-bottom:5px;*/
margin-left:auto;
margin-right:auto;
margin-top:0px;
background:#ddd;
border-radius:25px;
cursor:pointer;
overflow:hidden;
}

.morebutton:hover{
background:#eee;
height:15px;        
}

.arrows{
width:20px;
height:15px;
margin:0px auto;
background:url(images/morearrows.png) no-repeat 0px 0px;
}

This is the current jQuery on the elements:

$("#firstarrow").click(function(){
    $("#londonmore").slideToggle(100);
});
//this reveals the sub-categories in a table called #londonmore

Here's what I have tried (within the function above):

$(this).toggle( 
    function(){ 
        $(".arrows").css({"background-position":"0px"}); 
    },  
    function(){ 
        $(".arrows").css({"background-position":"10px"}); 
});

I have tried playing about with the amounts the background position changes but all it does is move the arrow slightly, it doesn't move it on the first click and doesn't move to the position I want it in, also it doesn't move back on hiding the sub-categories.

解决方案

This answer is going to have to be a bit general as you haven't posted any code yet, but there is a callback you get on .slideToggle(). Use that to do the .css()

You'll just have to check which state you're in so you set the right arrow.

For example:

    $('#button1').slideToggle('slow',function() {
        if ( ... ) {
            $('#arrow1').css('background-position','?px ?px');
        } else {
            $('#arrow1').css('background-position','?px ?px');
        }
    });

You'll have to fill in the blanks - or you could implement the callback in another way, but whatever you do if you want to do the css change when the slideToggle fires, using the callback is the way to go.

这篇关于是否有一种简单的方法可以在点击事件时在两种状态之间切换背景位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！