Форум

toyboy__37 · #1 (**permalink**) 25.01.2016, 09:14

Добрый день. Понимаю, что открывашек на форуме было уже более двухсот, но я очень надеюсь на помощь =).

Конструкция блоков такая.

<div class="section">
	<div>
		<div>
			<button class="slider-btn">btn1</button>
			<div>
				<button class="slider-btn">btn2</button>
				<button class="slider-btn">btn3</button>
			</div>
		</div>
	</div>
	<div class="slider-content">slider content1</div>
	<div class="slider-content">slider content2</div>
	<div class="slider-content">slider content3</div>
</div>

Задача такая: при нажатии на кнопку должен вылезать соответствующий контент, а при нажатии вне блока слайд сворачивался.

рони · #2 (**permalink**) 25.01.2016, 09:52

toyboy__37,
мда ... Закрытие блока по нажатию в любом месте

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .active-menu-item{background:  #FF00FF;}
    div.slider-content{display:none; width:600px;height:200px;}
    .slider-content:nth-child(2){background-color: green}
	.slider-content:nth-child(3){background-color: pink}
	.slider-content:nth-child(4){background-color: blue}

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
    $(function() {
    var $but = $(".slider-btn"),
        $blocks = $(".slider-content");
    $but.each(function(i, elem) {
        var $el = $(elem);
        $el.click(function() {
            $but.not($el).removeClass("active-menu-item");
            $el.toggleClass("active-menu-item");
            $blocks.each(function(j, el) {
                 $(el)["slide" + (i == j ? "Toggle" : "Up")]();
            });
        })
    });
    $('html').click(function (event) {
          if ($(event.target).closest('.slider-btn, .slider-content' ).length) return;
          $but.filter('.active-menu-item').click()
      });
});
  </script>
</head>

<body>
<div class="section">
	<div>
		<div>
			<button class="slider-btn">btn1</button>
			<div>
				<button class="slider-btn">btn2</button>
				<button class="slider-btn">btn3</button>
			</div>
		</div>
	</div>
	<div class="slider-content">slider content1</div>
	<div class="slider-content">slider content2</div>
	<div class="slider-content">slider content3</div>
</div>

</body>

</html>

toyboy__37 · #3 (**permalink**) 26.01.2016, 16:43

рони, большое спасибо!

Форум

Справочник

Discord чат

Курсы javascript