Как изменить/изменить положение фона на слайде()?

Я нашел код для открытия/закрытия div, когда я нажимаю на определенную кнопку. Теперь я также хочу сделать не только div open/close, но кнопка open/close изменится со стрелки вниз на стрелку вверх.Как изменить/изменить положение фона на слайде()?

Это то, что я до сих пор извиняю, если мое сообщение неверно, так как это мое первое сообщение.

Изображение высота = 60 пикселей и ширина = 30 пикселей. Стрелка вверх находится на одной половине, а стрелка вниз - на другой половине.

<style> 
.content_toggle { 
background: url(toggle-btn.png); 
background-color: rgba(0, 0, 0, 0.9); 
position: absolute; 
cursor: pointer; 
bottom: 62px; 
left: 850px; 
height: 30px; 
width: 30px; 
} 
</style> 


<body> 
<div class="content_toggle" style="display: block;"></div> 

<script> 
$("div.content_toggle").click(function() { 
    $("div.content").slideToggle("slow"); 
}); 
</script> 

<div class="content">content, content, content</div> 
</body>

источник

2012-06-16 Anthony Russo

Это полезный пост: http://stackoverflow.com/questions/1062731/jquery-toggle-to-change-image. И это: http://stackoverflow.com/questions/4840635/jquery-button-click-change-image?rq=1 – Nick

Anthony - чтобы держать всех в стороне, вы хотите отметить свой предпочтительный ответ и +1 (стрелка вверх) либерально как только у вас будет достаточно рейтинга :) Сообщество может стать немного порочным для тех, кто этого не сделает. – Nick

@ Ник благодарю вас за эту информацию. –

использовать класс для «стрелка вверх», а другой для «стрелка вниз», а затем переключаться между ними, как вы переключаетесь Див видимость:

<style> 
    .content_toggle { 
     background-color: rgba(0, 0, 0, 0.9); 
     position: absolute; 
     cursor: pointer; 
     bottom: 62px; 
     left: 850px; 
     height: 30px; 
     width: 30px; 
    } 
    .arrow-up { 
     background: url(toggle-btn.png); 
     background-position: 0 0; 
    } 
    .arrow-down { 
     background: url(toggle-btn.png); 
     background-position: 0 -30; 
    } 
</style> 
<body> 
    <div class="content_toggle arrow-up" style="display: block;"></div> 
    <script> 
     $(document).ready(function() { 
      $("div.content_toggle").click(function() { 
       var self = $(this); //cache jQuery object 
       $("div.content").slideToggle("slow"); 
       if (self.hasClass("arrow-up")) { 
        self.removeClass("arrow-up").addClass("arrow-down"); 
       } else { 
        self.removeClass("arrow-down").addClass("arrow-up"); 
       } 
      }); 
     }); 
    </script> 
    <div class="content">content, content, content</div> 
</body>

источник

2012-06-16 22:16:53 pete

Я думаю, что изображения находятся в одном файле изображения не в двух отдельных. Позиционирование изображения в каждом классе, вероятно, было бы лучше в этом случае. Подобно тому, о чем говорил «галхен». – Nope

Да, похоже, что изображения находятся в одном файле, хотя это, вероятно, предпочтительнее и, конечно, более стандартно использовать два изображения :) – Nick

Затем определите классы «стрелка вверх» и «стрелка вниз» соответственно (то есть, то же изображение, но различное позиционирование). Принцип тот же. – pete

В обработчике щелчка будет просто переключать класс с именем «активный». Вам нужно будет написать правило CSS для .content_toggle.active, что настраивает изображение так, как вы хотите

$("div.content_toggle").click(function() { 
     $("div.content").slideToggle("slow");  
     $(this).toggleClass('active'); 
});

источник

2012-06-16 22:14:56 charlietfl

поскольку обе стрелки находятся в одном изображении, вы хотите установить атрибут CSS фон-позиции:

<script type="text/javascript"> 
$(function(){ 

    $("div.content_toggle").data('bgp',0).click(function() { 
     $("div.content").slideToggle("slow"); 
     $(this).data('bgp', 30 - $(this).data('bgp')); // toggle the stored value 
     $(this).css('background-position', '0 '+$(this).data('bgp')+'px'); // set the scss 
    }); 
}); 
</script>

обратите внимание, что я меняюсь в фон положение по оси у по 30px

источник

2012-06-16 22:15:12 galchen

лучше сделать это, обратившись к классу CSS, который имеет положение фона, скорректированное, чем это делает это. –

@MoinZaman i agree – galchen

Есть ли причина, почему этот пример не работает в IE? –

Я бы сделал это с .toggle(). У вас больше контроля, и код более читабельен, т. Е. Видеть, что происходит, когда.

И определенно используйте один или два класса для открытого/закрытого состояния.

См пример здесь: http://jsbin.com/anebug/edit#html,live

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<style> 
    .content_toggle { 
    background: url(toggle-btn.png); 
    background-color: rgba(0, 0, 0, 0.9); 
    position: absolute; 
    cursor: pointer; 
    bottom: 62px; 
    left: 850px; 
    height: 30px; 
    width: 30px; 
    } 
    .content { background-image:url(arrow.png); } 
    .closed { background-position:0 -30px; } 
    .open { background-position:0 0; } 
</style> 
</head> 


<body> 
<div class="content_toggle" style="display: block;"></div> 

<div class="content">content, content, content</div> 


<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script> 
    $("div.content_toggle").toggle(
     function() { $('.content').slideDown('slow', 
            function(){$(this).removeClass('open')});}, 
     function() { $('.content').slideUp('slow', 
            function(){$(this).addClass('closed')}); 
    }); 
</script> 

    </body> 
</html>

источник

2012-06-16 22:35:48

Я согласен использовать класс css для фонового положения, но я попробовал это, и он не работает. Я мог бы пропустить что-то очевидное. Для меня работает демонстрация galchen. –

Как изменить/изменить положение фона на слайде()?

ответ

Смежные вопросы