Не работает if - else условие
Доброго времени суток.
Пытаюсь сделать простенький спойлер для скрытия контента кликом: Каркас: <div class="spoiler-wrapper"> <div class="spoiler unfolded">Открытый</div> <div class="spoiler-text">text</div> </div> <div class="spoiler-wrapper"> <div class="spoiler folded">Закрытый</div> <div class="spoiler-text">text</div> </div> Скрипт:
jQuery(document).ready(function(){
if(jQuery('.spoiler').hasClass("unfolded")) {
jQuery('.spoiler-text').show();
}
else if(jQuery('.spoiler').hasClass("folded")) {
jQuery('.spoiler-text').hide();
}
jQuery(".spoiler").click(function(){
jQuery(this).toggleClass("folded").toggleClass("unfolded").next().slideToggle();
})
})
Ссылка на fiddle:http://jsfiddle.net/96FY6/21/ По замыслу состояние дивов-спойлеров должно меняться, в зависимости от присвоенного класса (folded - контент скрыт, unfolded - показан). Однако на практике ко всем спойлерам применяется условие, объявленное первым. Реально ли реализовать такой функционал, для одноимённых дивов? |
iprazor,
условие ненужно, во вторых всё заменяет одна строка в css.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery('.spoiler.unfolded + div').show(); //??? нужно ли
jQuery('.spoiler.folded + div').hide() ;// .spoiler.folded + div {display: none;}
jQuery(".spoiler").click(function(){
jQuery(this).toggleClass("folded").toggleClass("unfolded").next().slideToggle();
})
})
</script>
</head>
<body>
<div class="spoiler-wrapper">
<div class="spoiler unfolded">Открытый</div>
<div class="spoiler-text">text</div>
</div>
<div class="spoiler-wrapper">
<div class="spoiler folded">Закрытый</div>
<div class="spoiler-text">text</div>
</div>
</body>
|
Огромное спасибо, то, что надо!
|
| Часовой пояс GMT +3, время: 03:54. |