Как я могу сделать тег Div видимым и невидимым?
У меня есть два тега d1 и d2 (скрытые). Если я нажму на текстовое поле (t1) d1, d2 должен стать видимым, а затем, если я щелкну где-нибудь на странице, кроме этого d2, d2 должен снова скрыться, и если я щелчок в любом месте d2, должен быть виден только d2. d2 содержит множество дочерних элементов.
Я пробовал код, чтобы сделать d2 видимым, но я не понимаю, как снова сделать его невидимым, если мы щелкнем за пределами d2.
$("#t1").click(function () {
$("#d2").removeClass("hidden");
});
У меня есть два тега d1 и d2 (скрытые). Если я нажму на текстовое поле (t1) d1, d2 должен стать видимым, а затем, если я нажму в любом месте на странице, кроме этого текстового поля (t1) и d2, d2 должен получить снова скрыт, и если я щелкну где-нибудь в d2, d2 должен быть виден только.
Что-то, что может вас заинтересовать: api.jquery.com/toggleclass
Пожалуйста, поделитесь фрагментом кода и снимками экрана, если это возможно.
Поделитесь кодом html/css, пожалуйста
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Надеюсь, это то, что вы ищете, спасибо
$('#txt_Cartons1').click(function(e){ // click on text t1
$('#hidden_div1').removeClass('hidden')
})
$(document).click(function(e){ // Click anywhere except t1 and d2
if ( !$(e.target).closest("#hidden_div1").length > 0 && ! $(e.target).closest("#txt_Cartons1").length > 0) {
$('#hidden_div1').addClass('hidden')
}
});.hidden
{
display:none
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "row" id = "outer_div"> // First Div d1
<input type = "text" id = "txt_Cartons1" class = "form-control value-control floating-label-control" data-isdynamic = "false" data-placeholder = "Cartons" data- label = "Cartons" onfocus = "SearchItems.init()" onblur = "SearchItems.init()" />
</div>
<div id = "hidden_div1" class = "hidden"> //Second Div d2 <Some Tags are there> </div>Я не хотел выполнять какие-либо действия по щелчку d2, значит, я хотел оставить его как есть. Надеюсь, ты получил.
@TauFeeQ это то, что вы ожидаете?
Код, отправленный вами, отлично работает в компиляторе Stackoverflow, я меняю идентификатор тегов, поскольку я не использую имя класса, я использую код для выполнения операции. Тогда он не работает.
если вы используете id, используйте $("#t2") вместо $('.t1')
«Bizgaze_SearchItems не определено» означает, что сначала нужно декалькировать этот fn, проверьте мой фрагмент сейчас
$("#t1").click(function () {
$("#d2").removeClass("hidden");
});
$('body').on('click', function(a_event) {
if (!$('#d2').is(a_event.target) && !$('#t1').is(a_event.target)) {
$("#d2").addClass("hidden");
}
})
Решение
При нажатии кнопки (t1) отображается div (d2)
$("#t1").on("click",function () {
$("#d2").css("display","block");
});
На странице клик d2 нужно скрыть
$('body').on('click', function() {
$("#d2").css("display","none");
});
Шивани на самом деле есть два div, d1 и d2 (невидимые). Если вы нажмете на текстовое поле (t1) из d1, d2 должно стать видимым, и если вы нажмете в любом месте на visibled d2, не нужно ничего делать, потому что есть текстовые поля в d2 мы заполнили в нем значения, и теперь d2 виден, и если вы щелкнете за пределами d2, кроме t1, d2 должен снова скрыться. Надеюсь, у вас есть требования.
поделитесь, пожалуйста, html-кодом