有没有一种简单的方法可以在点击事件中切换两种状态之间的背景位置？

Question

我有一个下拉价格列表，细分为一口大小的块，以便于查看，提供多种服务，一些服务分为子类别，用户可以点击一个带有小箭头的按钮，在点击按钮时，另一个级别的子类别是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"}); 
});

我尝试过玩背景位置变化的数量，但它所做的只是略微移动箭头，它不会在第一次点击时移动它并且不会移动到我想要的位置，也是不会再隐藏子类别。

Answer 1

这个答案必须有点笼统，因为你还没有发布任何代码，但是你会收到.slideToggle()的回调。用它来执行.css()

您只需要检查您所处的状态，然后设置右箭头。

例如：

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

你必须填写空白 - 或者你可以用另一种方式实现回调，但是如果你想在slideToggle触发时进行css更改，无论你做什么，使用回调都是可行的方法。 / p>

Answer 2

我不会直接通过jQuery.css修改背景。我只是切换一个CSS类。我不确定你的标记是什么样的，但为了一个例子，我们可以这样做：

<div class="expandable">
  <a href="#" class="expandable-expander">
    <span class="arrows">This is our arrow element</span>
  </a>
  <div class="expandable-content">
      <p>This is the content to expand!</p>
      <p>This is the content to expand!</p>
      <p>This is the content to expand!</p>
      <p>This is the content to expand!</p>
      <p>This is the content to expand!</p>
      <p>This is the content to expand!</p>
  </div>
</div>

然后我们可以做这个css：

.arrows {
  /* this is the default state and as the default we want the arrow closed
     so the bg position 0 0 is for the closed state */
  width:20px;
  height:15px;
  margin:0px auto;
  display: inline-block;
  background: #f00 url(images/morearrows.png) no-repeat 0 0;
  text-indent: -999em;
}
.expandable {
  width:220px;
}
.expandable .expandable-expander {
   display: block;
   background: #ccc;
   width:220px;
   height:8px;
   border:outset 1px #ddd;
   margin-left:auto;
   margin-right:auto;
   margin-top:0px;
   background:#ddd;
   border-radius:25px;
   cursor:pointer;
   overflow:hidden;
}

.expandable .expandable-content {

   /* content is hidden at first unles .expandable is also .open */
    display: none;
}

.expandable.open .expandable-content {
   display: block;
}

.expandable .expandable-expander:hover {
   background:#eee;
   height:15px;
}

.expandable.open .expandable-expander .arrows {
   background-position: 0 -10px;
   /* only change the background position because everything else is set up */
    background-color: #0f0;
}

最后我们基于jQuery的js：

$(function(){
   $('.expandable .expandable-expander').click(function (e) {
       var $this = $(this),
           $container = $this.closest('.expandable'),
           $content = $container.find('.expandable-content');
       e.preventDefault();

       $content.slideToggle(100, function () {
           $container.toggleClass('open');
       });
   });
});

通过这种方式并基于自包含结构配置事物，您只需要在任何给定页面上运行此代码一次，只要您使用符合要求的类结构就可以了。你可以在很多地方重复使用它，而不会改变任何东西。

Working Fiddle

谨慎......除非您可以确保DOM的状态，否则您可能希望避免切换功能并使用长手版本。如果某些东西不同步，你可能会在切换其他东西时切换打开的东西。我认为在这种情况下这将是一个问题。