Форум

Gasherez · #1 (**permalink**) 02.09.2013, 10:20

Вот фрагмент кода. Нужно чтобы при нажатии на ссылку менялась стрелочка с on на off, и наоборот с off на on. Только на этой ссылке уже весит событие, блок id="collapseTwo" сворачивается при нажатии на ссылку <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">. Сама стрелочка прописана через background. Подскажите как это сделать?

<div class="container content-block accordion-group">
    <h2 class="">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">Услуги</a>
    </h2>
    <div id="collapseTwo" class="accordion-body collapse">
         <div class="content-services">
             <h3>Vip-такси</h3>
                 <p>В нашей службе такси - большой набор услуг по перевозке пассажиров и грузов по городу и за городом. У нас всегда вежливые и опытные водители, внимательные диспетчеры. Вы можете сделать заявку по телефону или онлайн. Работаем круглосуточно.</p>
         </div>
    </div>
</div>

.content-block h2 {
cursor: pointer;
line-height: 30px;
margin: 0 auto;
font-size: 24px;
padding: 5px 0;
text-align: left;
text-transform: none;
width: 87.5%;
}
.content-block h2 a {
background: url(../img/on.png) no-repeat 100% 65%;
display: block;
width: 100%;
}

ksa · #2 (**permalink**) 02.09.2013, 13:40

Сообщение от Gasherez

Подскажите как это сделать?

Как вариант:
- сделать "добавочный" класс с другим бекграундом
- ставить/удалять тот класс при клике

Gasherez · #3 (**permalink**) 02.09.2013, 14:14

Это через onclick? Если не трудно напишите пример.

Gasherez · #4 (**permalink**) 02.09.2013, 18:30

Создал два класса:

.on {
background: url(../img/on.png) no-repeat 100% 65%;
display: block;
margin: 0 auto;
width: 87.5%;
border: 1px solid red;
}

.off {
background: url(../img/off.png) no-repeat 100% 65%;
display: block;
margin: 0 auto;
width: 87.5%;
border: 1px solid green;
}

вставил

<div class="container content-block accordion-group">
	    <h2 class="">
	        <a class="accordion-toggle on" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo" onclick="this.className = (this.className == 'on' ? 'off' : 'square')">Услуги</a>
	    </h2>
	    <div id="collapseTwo" class="accordion-body collapse">
	         <div class="content-services">
	             <h3>Vip-такси</h3>
	                 <p>В нашей службе такси - большой набор услуг по перевозке пассажиров и грузов по городу и за городом. У нас всегда вежливые и опытные водители, внимательные диспетчеры. Вы можете сделать заявку по телефону или онлайн. Работаем круглосуточно.</p>
	         </div>
	    </div>
	</div>

но ничего хорошего не произошло, только скидывается класс, т.е. исчезает background, ширина, рамка и центрирование.

ksa · #5 (**permalink**) 02.09.2013, 18:46

Сообщение от Gasherez

Создал два класса

Это плохой подход...

1-вый должен содержать все нужные настройки + дефолтный бекграунд
2-рой должен быть приорететнее первого и содержать только альтернативный бекграунд

ksa · #6 (**permalink**) 02.09.2013, 18:55

Сообщение от Gasherez

Если не трудно напишите пример.

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
a {
	display: block;
	width: 100px;
	height: 30px;
	border: 1px solid;
	background: url('http://javascript.ru/forum/images/smilies/smile.gif') no-repeat center center;
}
a.off {
	background-image: url('http://javascript.ru/forum/images/smilies/blink.gif');
}
</style>
<script type="text/javascript">
$(function (){
	$('a').click(function (){
		$(this).toggleClass('off');
	});
});
</script>
</head>
<body>
<a href='#'></a>
</body>
</html>

BETEPAH · #7 (**permalink**) 02.09.2013, 18:55

а почему

this.className = (this.className == 'on' ? 'off' : 'square')

а не

this.className = (this.className == 'on' ? 'off' : 'on')

или

this.className = (this.className == 'accordion-toggle on' ? 'accordion-toggle off' : 'accordion-toggle on')

?

Gasherez · #8 (**permalink**) 03.09.2013, 00:33

BETEPAH,
не заметил, спасибо!

Gasherez · #9 (**permalink**) 03.09.2013, 00:34

ksa,
спасибо огромное, сегодня днем проверю отпишу

Форум

Справочник

Discord чат

Курсы javascript