При клике на один элемент скрывать другой
Все работает, но проблема в том что если открыть блок категории и при нажатии на "Фильтр", блок категории скрывается, а клик по кнопке категории не происходит.
<!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,
опишите, что хотите сделать? |
Получается 2 кнопки, при нажатии на кнопку появляется блок, а я хочу чтобы при нажатии на вторую кнопку появлялся другой блок, а открытый скрывался.
Но потом когда я возвращаюсь к первой кнопке и на нее нажимаю чтобы открыть блок, то мне приходится нажимать 2 раза. Как убрать этот второй клик. Т.е нужно что бы блок скрывался и происходил клик по кнопке. Как-то так объяснил, извините что криво. |
Андрей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,
добавлено, смотрите пост #4 снова |
СПАСИБО!!
|
| Часовой пояс GMT +3, время: 00:05. |