Как скрыть свой div с помощью jQuery, а затем снова показать его, нажав другой div?

Question

Что я хочу сделать:

Сделать мой div скрытым при загрузке страницы, а затем, когда вы нажмете другой div, он покажет. Мои ограниченные знания на самом деле не позволяют мне это сделать. Что я делаю не так?

JQuery:

$(document).ready(function(){ 
    $('#trojkat2').click(function(){ 
     $('#login').hide(); 
    }); 
}); 
</script> 

"trojkat2" является ДИВ я хочу нажать, чтобы сделать "Логин" появляются.

HTML:

<div class="kwadrat2"> 
    <div class="trojkat2"> 
    <div class="trojkat_bg2"></div> 
    </div> 
    </div> 

<div class="login"> 
<img style="height: 550px; width: 280px; border-radius: 10px;" src="buymenu.jpg"> 
</div> 

Что я сделал не так?

Answer 1

Во-первых, скрыть свой #login DIV, когда функция документ готов .hide(), после щелчка $ (. Trojkat2), используйте show(), чтобы показать #login, кстати, селектор класса. вместо #

$(document).ready(function(){ 
 
    $('.login').hide(); 
 
    $('.trojkat2').click(function(){ 
 
     $('.login').show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="kwadrat2"> 
 
<div class="trojkat2">click here 
 
<div class="trojkat_bg2"></div> 
 
</div> 
 
</div> 
 

 
<div class="login"> 
 
<img style="height: 550px; width: 280px; border-radius: 10px;" src="buymenu.jpg"> 
 
</div>

Answer 2

Попробуйте это:

$('.trojkat2').click(function() { 
    $('.login').show(); 
}); 

Answer 3

Ваш пример не имеет элемент с ID = trojkat2 так что ваш селектор $ ("# trojkat2") не будет работать. То же самое для #login. Вместо этого вы должны изменить его на селектор класса:

$('.trojkat2').click(function(){ 
     $('.login').hide(); 
    }); 

Пример: http://jsfiddle.net/DinoMyte/nrNX8/529/

Answer 4

В вашем HTML коде, вы создали классы, называемые Логин и trojkat2. Однако в вашем jQuery вы говорите ему, чтобы он вызывал идентификаторы, называемые login и trojkat2. Классам предшествует «.». а идентификаторам предшествует «#». Вместо этого попробуйте использовать следующий код в jQuery:

$(document).ready(function(){ 
    $('.trojkat2').click(function(){ 
     $('.login').hide(); 
    }); 
});