Форум

Андрей812 · #1 (**permalink**) 25.08.2019, 21:17

Все работает, но проблема в том что если открыть блок категории и при нажатии на "Фильтр", блок категории скрывается, а клик по кнопке категории не происходит.

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style>

</style>
<script type="text/javascript">
	     	    $(document).ready(function() { 
	      $("#filtertrigger").toggle(function() { 
	        // Отображаем скрытый блок 
	        $("ASIDE#blockfilter").show({ direction: "horizontal" }, 500).addClass("active"); // fadeIn - плавное появление
	         $(document).ready ( function(){ $('#filtertrigger').text('Закрыть'); });
			if(((document.getElementById('box').style.display="none") === false) && ($(document).ready ( function(){ $('#trigger').text('Закрыть'); })) === true) {
			$('#trigger').trigger('click');
			$(document).ready ( function(){ $('#trigger').text('Категории'); });
			};
	        return false; // не производить переход по ссылке
	      },  
	      function() { 
	        // Скрываем блок 
        $("ASIDE#blockfilter").hide({ direction: "horizontal" }, 500).removeClass('active');
 		$(document).ready ( function(){ $('#filtertrigger').text('Фильтр'); });
	        return false; // не производить переход по ссылке
	      }); // end of toggle() 
  			$("#trigger").toggle(function() { 
	        $("ASIDE#box").fadeIn();
	        $(document).ready ( function(){ $('#trigger').text('Закрыть'); });
	        $("ASIDE#blockfilter").fadeOut().removeClass('active'); // fadeOut - плавное исчезновение 
	        return false;
	      },  
	      function() { 
	        $("ASIDE#box").fadeOut();
	         $(document).ready ( function(){ $('#trigger').text('Категории'); });
	        return false; 
	      }); // end of toggle() 
	    }); // end of ready()
</script>

</head>
<body>
<button id="trigger">Категории</button>
<button id="filtertrigger">Фильтр</button>
<aside id="box" style="display:none">Содержимое категорий</aside>
<aside id="blockfilter" style="display:none">Содержимое фильтра</aside>
</body>
</html>

рони · #2 (**permalink**) 25.08.2019, 21:33

Андрей812,
опишите, что хотите сделать?

Андрей812 · #3 (**permalink**) 25.08.2019, 21:48

Получается 2 кнопки, при нажатии на кнопку появляется блок, а я хочу чтобы при нажатии на вторую кнопку появлялся другой блок, а открытый скрывался.
Но потом когда я возвращаюсь к первой кнопке и на нее нажимаю чтобы открыть блок, то мне приходится нажимать 2 раза. Как убрать этот второй клик. Т.е нужно что бы блок скрывался и происходил клик по кнопке. Как-то так объяснил, извините что криво.

рони · #4 (**permalink**) 25.08.2019, 21:56

Андрей812,

<!DOCTYPE html >
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
  .box{
      display: none;
  }
  .btn.open:after{
      content: "Закрыть";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      color: #000000;
      text-align: center;
      width: 100%;

  }
  .btn{
      position: relative;
  }
  .btn.open{
      color: transparent;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
        var btn = $(".btn"), block = $(".box");

        $(document).click(function(event) {
                var target = $(event.target),cur;
                if (target.is(".btn")) {
                       event.preventDefault();
                       var index = btn.index(target);
                       cur = block.eq(index).slideToggle();
                       target.toggleClass("open")
                 }
                if (target.closest(".box").length) return;
                block.not(cur).slideUp("slow");
                btn.not(target).removeClass("open")
        })
});
  </script>
</head>
<body>
<button id="trigger"  class="btn">Категории</button>
<button id="filtertrigger" class="btn" >Фильтр</button>
<aside id="box"  class="box">Содержимое категорий</aside>
<aside id="blockfilter" class="box">Содержимое фильтра</aside>

</body>
</html>

на всякий случай toggle в jquery, как в вашем коде выше, так не работает уже давным давно!!!

Андрей812 · #5 (**permalink**) 25.08.2019, 22:20

СПАСИБО ОГРОМНОЕ!!!

Андрей812 · #6 (**permalink**) 25.08.2019, 23:07

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

рони · #7 (**permalink**) 25.08.2019, 23:28

Андрей812,
добавлено, смотрите пост #4 снова

Андрей812 · #8 (**permalink**) 25.08.2019, 23:35

СПАСИБО!!

Форум

Справочник

Discord чат

Курсы javascript