Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.08.2019, 21:17
Интересующийся
Отправить личное сообщение для Андрей812 Посмотреть профиль Найти все сообщения от Андрей812
 
Регистрация: 10.09.2018
Сообщений: 27

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

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

Последний раз редактировалось Андрей812, 25.08.2019 в 21:42.
Ответить с цитированием
  #2 (permalink)  
Старый 25.08.2019, 21:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Андрей812,
опишите, что хотите сделать?
Ответить с цитированием
  #3 (permalink)  
Старый 25.08.2019, 21:48
Интересующийся
Отправить личное сообщение для Андрей812 Посмотреть профиль Найти все сообщения от Андрей812
 
Регистрация: 10.09.2018
Сообщений: 27

Получается 2 кнопки, при нажатии на кнопку появляется блок, а я хочу чтобы при нажатии на вторую кнопку появлялся другой блок, а открытый скрывался.
Но потом когда я возвращаюсь к первой кнопке и на нее нажимаю чтобы открыть блок, то мне приходится нажимать 2 раза. Как убрать этот второй клик. Т.е нужно что бы блок скрывался и происходил клик по кнопке. Как-то так объяснил, извините что криво.
Ответить с цитированием
  #4 (permalink)  
Старый 25.08.2019, 21:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Андрей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, как в вашем коде выше, так не работает уже давным давно!!!

Последний раз редактировалось рони, 25.08.2019 в 23:26.
Ответить с цитированием
  #5 (permalink)  
Старый 25.08.2019, 22:20
Интересующийся
Отправить личное сообщение для Андрей812 Посмотреть профиль Найти все сообщения от Андрей812
 
Регистрация: 10.09.2018
Сообщений: 27

СПАСИБО ОГРОМНОЕ!!!
Ответить с цитированием
  #6 (permalink)  
Старый 25.08.2019, 23:07
Интересующийся
Отправить личное сообщение для Андрей812 Посмотреть профиль Найти все сообщения от Андрей812
 
Регистрация: 10.09.2018
Сообщений: 27

Подскажите, пожалуйста, как добавить чтобы при нажатии на кнопку менялось содержимое кнопки на "Закрыть". А при нажатии на "Закрыть" возвращало значение кнопки.
Ответить с цитированием
  #7 (permalink)  
Старый 25.08.2019, 23:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Андрей812,
добавлено, смотрите пост #4 снова
Ответить с цитированием
  #8 (permalink)  
Старый 25.08.2019, 23:35
Интересующийся
Отправить личное сообщение для Андрей812 Посмотреть профиль Найти все сообщения от Андрей812
 
Регистрация: 10.09.2018
Сообщений: 27

СПАСИБО!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как реализовать скрытие определённых элементов при клике на один из них tupoimudak2 Элементы интерфейса 10 17.06.2017 11:39
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
всплывающий блок при клике на input ChikiBOBONI (X)HTML/CSS 1 31.10.2016 11:40
При клике на ссылку ничего не происходит gurg0n Элементы интерфейса 2 24.06.2013 11:11
Вопрос по jquery. Как запретить один из скриптов при клике vuler Общие вопросы Javascript 1 07.03.2012 22:35