jquery - 滑动切换效果

Question

我有以下代码：

<script type="text/javascript">
function shownavall()
{
$('#shownavall').slideToggle('slow', function() {
 $('.otherlink').toggle(function(){
    $(this).css('background-position', '0px 0px');
     }, function(){
    $(this).css('background-position', '25px 0px');
 });
  });

}
</script>

当我尝试调用该函数时，该函数在slidetoggle零件上起作用。但是不改了css我.otherlink想知道为什么？以及如何解决？

我试图通过使用条件语句来做到这一点，这是我的代码：（此代码根本不起作用！）

function shownavall()
{
$('#shownavall').slideToggle('slow', function() {
if ($('.otherlink').css('background-position') == '25px 0px')
{
$(.otherlink).css('background-position', '0px 0px');
}
else 
{
$(.otherlink).css('background-position', '25px 0px');
}
  });
}

我 100% 确定错误出在我的 Jquery 代码中。所以请不要询问html或css。

Answer 1

function shownavall()
{
$('#shownavall').slideToggle('slow', function() {
if ($('.otherlink').css('background-position') == '25px 0px')
{
$('.otherlink').css('background-position', '0px 0px');
}
else 
{
$('.otherlink').css('background-position', '25px 0px');
}
  });
}

Answer 2

我认为在 CSS 中“背景位置”是正确的，而不是“背景位置”。此外 background -position 更改背景的位置而不是元素本身的位置，因此您必须使用位置属性。

      <script type="text/javascript">

  function shownavall()
    {
     $('#shownavall').slideToggle('slow', function() {
     $('.otherlink').toggle(function(){
  $(this).css({'position':'absolute','left':'100px','top':'150px'});

      }, function(){
    $(this).css({'position':'absolute','left':'0px','top':'0px'});
  });
    });

  }

     </script>