Нажатие только определенный div

175

27 сентября 2021, 01:00

Подскажите пожалуйста, есть такой код.

function open_block() { 
  if ($("#block1").attr("data-open") == "1") { 
    $("#block1").css("height", "300px"); 
    $("#block1").attr("data-open", "2"); 
  } 
  else { 
    $("#block1").css("height", "50px"); 
    $("#block1").attr("data-open", "1"); 
  } 
}

#block1 { 
  width: 200px; 
  height: 50px; 
  border: 1px solid; 
} 
 
#block2 { 
  width: 150px; 
  height: 25px; 
  border: 1px solid; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="block1" data-open="1" onclick="open_block();"> 
  <div id="block2"></div> 
</div>

Как сделать что бы div id="block1" разворачивался только по нажатию на div id="block1"

Answer 1

Можно сделать проверку на элемент который вызвал событие

function open_block() { 
  if (window.event.target.id != 'block1') return; 
  if ($("#block1").attr("data-open") == "1") { 
    $("#block1").css("height", "300px"); 
    $("#block1").attr("data-open", "2"); 
  } 
  else { 
    $("#block1").css("height", "50px"); 
    $("#block1").attr("data-open", "1"); 
  } 
}

#block1 { 
  width: 200px; 
  height: 50px; 
  border: 1px solid; 
} 
 
#block2 { 
  width: 150px; 
  height: 25px; 
  border: 1px solid; 
  z-index: 10; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="block1" data-open="1" onclick="open_block();"> 
  <div id="block2"></div> 
</div>

Answer 2

Корректнее будет проверять событие из аргумента, а для переключения визуального состояния - использовать класс:

$('#block1').click(function (e) { 
  if (e.target === this) 
    $(this).toggleClass('is-open'); 
});

#block1 { width: 200px; height: 50px; border: 1px solid; background: #ded; } 
#block2 { width: 150px; height: 25px; border: 1px solid; background: #ddd; } 
#block1.is-open { height: 300px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="block1"> 
  <div id="block2"></div> 
</div>

Answer 3

div №2 входит в div №1 поэтому так происходит убери div №2 из div №1 и тогда все получится

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как удалять невидимые символы в CKeditor?

Доброе время суток, форумчане!

140

javascript

Изменить колонтитул при печати

Браузер автоматически добавляет в колонтитул содержимое тега h1 и добавляет датуМожно как-то изменить его?

162

javascript

Блокировка пользователя

Блокирую я пользователя по IP, он его меняет и блокировки нетБлокирую я его по ключу, который записан в cookie или в localStorage, он его чистит и блокировки...

105

Почему не получается использовать Identity и Cookie authentication одновременно?

Есть база данных с логинами и паролями, по которой авторизирую пользователей с помощью cookieНо в ней есть не все пользователи

102