Настройка спойлера.
Суть вопроса такова. Есть код:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Спойлеры</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
$(this).parent().children('div.spoiler_body').slideToggle('slow');
return false;
});
});
</script>
<style type="text/css">
.spoiler_body {
display:none;
text-align: center;
}
.spoiler_links {
display: block;
font-size: 36pt;
text-align: center;
text-decoration: none;
color: #000;
cursor:pointer;
}
.spoiler_links:hover {
color: #060;
}
</style>
</head>
<body>
<div>
<a href="" class="spoiler_links">Название спойлера</a>
<div class="spoiler_body">
<img src="http://www.blogcdn.com/massively.joystiq.com/media/2011/10/facepalm.jpg" alt="" />
</div>
</div>
</body>
</html>
Нужно сделать следующие изменения: Добавить настраиваемый отступ подчеркивания и изменить его цвет (цвет подчеркивания не должен совпадать с цветом текста) Так же добавить функцию изменения цвета текста при наведении, и при раскрытом виде спойлера. Вся эта конструкция должна выравниваться посередине экрана. Пробовал разные варианты, но каждый раз одно из условий не соблюдалось. То перенос слов образовывался, то подчеркивание не реагировало на настройки,, то появлялось выравнивание по левому краю, то еще что то. В итоге налепил восьмиэтажный код, который, ко всему прочему, и работал неправильно. Показываю Вам базовый вариант. Надеюсь умные люди подскажут. |
Цитата:
|
http://wwwwww.ucoz.net/index/sss/0-9
как тут. только выравнивание названия спойлера по центру. и убрать подчеркивание пустого места. |
Цитата:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Спойлеры</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
$(this).parent().children('div.spoiler_body').slideToggle('slow');
return false;
});
});
</script>
<style>
.buttons-container {
position: relative;
}
.button1, .button2{
box-sizing: border-box;
width: 150px;
height: 40px;
text-decoration: none;
background-color: #ccc;
color: #08c;
position: absolute;
padding-top:11px;
text-align: center;
}
.button1 {
top: 20px;
left:50px;
}
.button2 {
top: 80px;
left:50px;
}
.spoiler_body {
display: none;
text-align: center;
}
.container {
text-align: center;
margin-bottom: 10px;
}
.line{
display: inline-block;
width: 530px;
height: 0;
border-bottom: 1px solid #999;
transition: all 1s linear;
}
.spoiler_links:hover+.container>.line{
border-bottom: 1px solid #0A5C0E;
}
.spoiler_links {
display: block;
font-size: 36pt;
text-align: center;
text-decoration: none;
color: #000;
cursor:pointer;
transition:all 1s linear;
}
.spoiler_links:hover {
color: #060;
}
</style>
</head>
<body>
<div>
<div class="buttons-container">
<a href="#" class="button1">Увеличить отступ</a>
<a href="#" class="button2">Уменьшить отступ</a>
</div>
<a href="" class="spoiler_links">Название спойлера</a>
<div class="container">
<div class="line"></div>
</div>
<div class="spoiler_body">
<img src="http://www.blogcdn.com/massively.joystiq.com/media/2011/10/facepalm.jpg" alt="" />
</div>
</div>
<script>
document.getElementsByClassName('button1')[0].onclick = function (){
var width =document.getElementsByClassName('line')[0].style.width || getComputedStyle(document.getElementsByClassName('line')[0]).width;
console.log(width);
width = parseInt(width) + 10+'px';
console.log(width);
document.getElementsByClassName('line')[0].style.width = width;
}
document.getElementsByClassName('button2')[0].onclick = function (){
var width =document.getElementsByClassName('line')[0].style.width || getComputedStyle(document.getElementsByClassName('line')[0]).width;
console.log(width);
width = parseInt(width) - 10+'px';
console.log(width);
document.getElementsByClassName('line')[0].style.width = width;
}
</script>
</body>
</html>
|
Спасибо большое.
При наведении образуется подчеркивание текста "название спойлера". Я имел в виду увеличение отступа именно этого подчеркивания, а не создание отдельного отступа.  |
Цитата:
Если тебе нужен отступ у подчеркивания - придется использовать border-bottom у какого-то элемента. |
Цитата:
|
Цитата:
|
Цитата:
добавить в CSS-коде в .line{...} или в .container{..} свойство margin-top: -8px; |
Разобрался)
Не подскажите, что добавить в код, что бы спойлер открывался поверх всех элементов, находящихся ниже его, а НЕ отодвигал их? |
| Часовой пояс GMT +3, время: 06:51. |