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');
}
  });
}

私は間違いが私のJqueryコードにあると100％確信しています。したがって、htmlやcssについては質問しないでください。

Answer 1

私はcssで「backgroundposition」の代わりに「background-position」が正しいと思います。また、background -positionは、要素自体の位置ではなく背景の位置を変更するため、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>

Answer 2

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');
}
  });
}