<div class="bordo"> <div class="big-map"> </div> <div class="big-two-sity"> <div class="two-sity dadda clearfix"> <div class="dodka"> <span>Екатеринбург</span> <div class="pod activemap"> Карта ЕКБ </div> </div> <div class="dodka"> <span>Челябинск</span> <div class="pod"> Карта ЧЕЛ </div> </div> </div> <div class="two-sity clearfix"> <div class="dodka"> <span>Нижневартовск</span> <div class="pod"> Карта НИЖ </div> </div> <div class="dodka"> <span>Курган</span> <div class="pod"> Карта Кург </div> </div> </div> <div class="two-sity clearfix"> <div class="dodka"> <span>Смоленск</span> <div class="pod"> Карта СМОЛ </div> </div> <div class="dodka"> <span>Москва</span> <div class="pod"> Карта МОС </div> </div> </div> </div> </div> .clearfix:after { content: ""; display: table; clear: both; } .two-sity { width: 500px; position: relative; list-style: none; background: #acacac; float: left; margin: 0; padding: 0; } .two-sity > .dodka { /* position: relative;*/ float: left; width: 50%; background: green; list-style: none; margin: 0; padding: 0; } .dodka > .pod { position: absolute; display: none; background: red; list-style: none; margin: 0; padding: 0; left: 0; width: 100%; height: 30px; } .big-map { position: relative; width: 100%; max-width: 500px; height: 300px; float: left; background: yellow; } .bordo { position: relative; } .dodka > .pod.activemap { display: block; } .dadda { margin-bottom: 30px; } @media (min-width: 1024px) { .two-sity { position: inherit; } .dodka > .pod { max-width: 500px; top: 0; } .dadda { margin-bottom: 0; } } @media (max-width: 500px) { .two-sity > .dodka { font-weight: normal; width: 100%; } .dodka > .pod { position: relative; } } $(".two-sity .dodka").addClass("first"); $('.first').click(function(event) { // if ($(event.target).parents(".dodka").length) { // return; // } var $thisPod = $(event.target).parent('.first').children('.pod'); $('.first .pod').not($thisPod).removeClass( "activemap" ); $thisPod.addClass( "activemap" ); event.preventDefault(); // Добавить класс родителю var $thisDadda = $(event.target).parents('.two-sity'); $('.two-sity').not($thisDadda).removeClass( "dadda" ); $thisDadda.addClass( "dadda" ); event.preventDefault(); });

https://jsfiddle.net/5gsrc0bk/

By clicking on the green block with the name of the city, under it opens a red field with a map (the map will be later, in the example it does not, it does not matter).

Everything works as it should, except - if you click on the green field OUTSIDE the name of the city that lies in the span, then the red area where the map should lie is closed.

And also, if you click on the text in the span in the block with the card, it also closes.

And I can not understand how to correctly function, so that the closure happens only by clicking on the green block with the name of the city, as well as by any of its descendants, and nowhere else.

I understand that the problem is in determining the relationship in the function, but I can not correctly alter.

    0