Раскрывающиеся списки
Здравствуйте. Планирую на сайт раскрывающиеся меню делать, чтобы при щелчке в одно меню раскрывались его подменю, а при щелчке на другую - открытые подменю закрывались, а нажатый раскрывался.
В стилях подменю скрыл с помлщью display: none, а в яваскрипте (jQuery) написал код:
$(".text").click(function(){
if ($(".textContent").slideUp()) {
$(".textContent").slideDown();
};
if ($(this).next().slideUp()) {
$(this).next().slideDown();
}
else {
$(this).next().slideUp();
};
});
Так теперь у меня на сайте при нажатии на ".text" все ".textContent" раскрываются, а нажатый подменю ($(this).next()) два раза раскрывается и закрывается. Что не так с кодом? Вроде же, всё логично: 1-if: если все ".textContent" раскрыты, их закрыть; 2-if: если нажатый подменю раскрыт, то его закрыть, иначе — раскрыть. |
Булат Азат улы,
http://javascript.ru/forum/project/3...na-jquery.html |
рони,
Спасибо за код! Но... Я его переделал под себя (мне нужно сделать код только по этим двум классам, так как я его собираюсь использовать не только в списках ul), и этот код работает только на половину. Раскрытие происходит, а закрытия нет. Вот испорченный мной ваш код:
$(".text").click(function(event) {
$(this).find(".textContent:visible").slideUp();
if ($(this).next().is(":hidden")) {
$(this).next().slideDown();
}
event.stopPropagation();
});
Покажите пожалуйста ошибку? |
Булат Азат улы,
сделайте минимальный макет с html и css |
рони,
В данном случае, конечно, можно и с "ul" обойтись, но этот скрипт у меня будет универсальным.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.textContent {
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".text").click(function(event) {
$(this).find(".textContent:visible").slideUp();
if ($(this).next().is(":hidden")) {
$(this).next().slideDown();
}
event.stopPropagation();
});
});
</script>
</head>
<body>
<p class="text">Клик</p>
<div class="textContent">
<p>Контент.</p>
</div>
<p class="text">Клик</p>
<div class="textContent">
<p>Контент.</p>
</div>
</body>
</html>
|
Булат Азат улы,
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.textContent {
display: none;
}
.active{
background-color: #DCDCDC;
}
.active + .textContent{
display: block;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function() {
$text = $(".text");
$text.on("click", function() {
$text.not($(this).toggleClass("active")).removeClass("active");
})
});
</script>
</head>
<body>
<p class="text">Клик1</p>
<div class="textContent">
<p>Контент.1</p>
</div>
<p class="text">Клик2</p>
<div class="textContent">
<p>Контент.2</p>
</div>
</body>
</html>
|
рони,
Это, получается, с помощью CSS происходит. Но жаль, что с таким методом плавно сделать нельзя. Ну ладно, все равно подойдет. спасибо! |
Булат Азат улы,
форум поиск открывашка -- 300 вариантов но вашего |
Булат Азат улы,
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.textContent {
display: none;
}
.active{
background-color: #DCDCDC;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function() {
var $text = $(".text"),$contex = $(".textContent");
$text.on("click", function() {
$text.not($(this).toggleClass("active")).removeClass("active");
var i = $text.index(this);
$contex.not($contex.eq(i).slideToggle()).slideUp()
})
});
</script>
</head>
<body>
<p class="text">Клик1</p>
<div class="textContent">
<p>Контент.1</p>
</div>
<p class="text">Клик2</p>
<div class="textContent">
<p>Контент.2</p>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 19:25. |