Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.09.2013, 09:20
Интересующийся
Отправить личное сообщение для Gasherez Посмотреть профиль Найти все сообщения от Gasherez
 
Регистрация: 26.08.2013
Сообщений: 25

Стрелка вниз на ссылке, при нажатии стрелка вверх
Вот фрагмент кода. Нужно чтобы при нажатии на ссылку менялась стрелочка с 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%;
}
Ответить с цитированием
  #2 (permalink)  
Старый 02.09.2013, 12:40
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,406

Сообщение от Gasherez
Подскажите как это сделать?
Как вариант:
- сделать "добавочный" класс с другим бекграундом
- ставить/удалять тот класс при клике
Ответить с цитированием
  #3 (permalink)  
Старый 02.09.2013, 13:14
Интересующийся
Отправить личное сообщение для Gasherez Посмотреть профиль Найти все сообщения от Gasherez
 
Регистрация: 26.08.2013
Сообщений: 25

Это через onclick? Если не трудно напишите пример.
Ответить с цитированием
  #4 (permalink)  
Старый 02.09.2013, 17:30
Интересующийся
Отправить личное сообщение для Gasherez Посмотреть профиль Найти все сообщения от Gasherez
 
Регистрация: 26.08.2013
Сообщений: 25

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

.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, ширина, рамка и центрирование.
Ответить с цитированием
  #5 (permalink)  
Старый 02.09.2013, 17:46
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,406

Сообщение от Gasherez
Создал два класса
Это плохой подход...

1-вый должен содержать все нужные настройки + дефолтный бекграунд
2-рой должен быть приорететнее первого и содержать только альтернативный бекграунд
Ответить с цитированием
  #6 (permalink)  
Старый 02.09.2013, 17:55
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,406

Сообщение от 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>
Ответить с цитированием
  #7 (permalink)  
Старый 02.09.2013, 17:55
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

а почему
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')

?

Последний раз редактировалось BETEPAH, 02.09.2013 в 17:59.
Ответить с цитированием
  #8 (permalink)  
Старый 02.09.2013, 23:33
Интересующийся
Отправить личное сообщение для Gasherez Посмотреть профиль Найти все сообщения от Gasherez
 
Регистрация: 26.08.2013
Сообщений: 25

BETEPAH,
не заметил, спасибо!
Ответить с цитированием
  #9 (permalink)  
Старый 02.09.2013, 23:34
Интересующийся
Отправить личное сообщение для Gasherez Посмотреть профиль Найти все сообщения от Gasherez
 
Регистрация: 26.08.2013
Сообщений: 25

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
смена картинок при нажатии sdff Общие вопросы Javascript 15 08.02.2014 15:08
SyntaxHighlighter подсветка при нажатии faraday Общие вопросы Javascript 3 31.03.2012 22:43
Скролл вверх при клике ie6/7/8 dr_gluk jQuery 0 21.03.2012 09:12
Выбранный текст в select при нажатии на кнопку "добавить" появлялся в select'e Адриан Общие вопросы Javascript 2 31.01.2012 11:38
Восстановление hidden field при нажатии кнопки Назад в браузере debugx Элементы интерфейса 1 19.10.2011 18:03