Форум

Булат Азат улы · #1 (**permalink**) 26.02.2017, 10:41

Здравствуйте. Планирую на сайт раскрывающиеся меню делать, чтобы при щелчке в одно меню раскрывались его подменю, а при щелчке на другую - открытые подменю закрывались, а нажатый раскрывался.
В стилях подменю скрыл с помлщью 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: если нажатый подменю раскрыт, то его закрыть, иначе — раскрыть.

рони · #2 (**permalink**) 26.02.2017, 10:58

Булат Азат улы,
Выпадающее меню на jquery

Булат Азат улы · #3 (**permalink**) 26.02.2017, 11:32

рони,
Спасибо за код! Но...
Я его переделал под себя (мне нужно сделать код только по этим двум классам, так как я его собираюсь использовать не только в списках ul), и этот код работает только на половину. Раскрытие происходит, а закрытия нет.
Вот испорченный мной ваш код:

$(".text").click(function(event) {
	$(this).find(".textContent:visible").slideUp();
	if ($(this).next().is(":hidden")) {
		$(this).next().slideDown();
	}
	event.stopPropagation();
});

Покажите пожалуйста ошибку?

рони · #4 (**permalink**) 26.02.2017, 11:35

Булат Азат улы,
сделайте минимальный макет с html и css

Булат Азат улы · #5 (**permalink**) 26.02.2017, 12:01

рони,
В данном случае, конечно, можно и с "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>

рони · #6 (**permalink**) 26.02.2017, 12:21

Булат Азат улы,

<!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>

Булат Азат улы · #7 (**permalink**) 26.02.2017, 12:52

рони,
Это, получается, с помощью CSS происходит. Но жаль, что с таким методом плавно сделать нельзя. Ну ладно, все равно подойдет.
спасибо!

рони · #8 (**permalink**) 26.02.2017, 13:09

Булат Азат улы,
форум поиск открывашка -- 300 вариантов но вашего ~~там нет~~ есть !!! то что вы хотите там 255 вариантов одного того же от простого до блекджека с ...

рони · #9 (**permalink**) 26.02.2017, 13:18

Булат Азат улы,

<!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>

Форум

Справочник

Discord чат

Курсы javascript