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

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，那么无论您做什么，都可以使用回调。

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 的状态，否则您可能希望避免切换功能并使用长手版本。如果某些内容不同步，您可能会在切换某些内容的同时关闭其他内容。我不认为在这种情况下这将是一个问题。