Как сделать так, чтобы на нажатие реагировал весь блочный элемент?

416

24 ноября 2016, 10:02

Блочный элемент (#settings) реагирует на нажатие только в том случае, если нажатие пришлось на пустую область. А если непосредственно нажать на заголовок(h1) или изображение, то данный блочный элемент на нажатие реагировать не будет. Как это исправить?

<div  id="settings"><h1>Текст</h1><img src="foto.jpg" alt="" width="28" height="28"></div>
<div id="menu">Меню</div>
<script>
    $(document).on('click', function(e) {
      if (e.target.id != 'settings' && e.target.id != 'menu') {
        $("#menu").hide();
      } else if (e.target.id != 'menu') {
        $("#menu").toggle();
      }
});
</script>

Answer 1

У вас странный код js. Попробуйте такой:

//открытие подменю
$('#settings').on('click', function(){ //событие click на блок settings
   $('#menu').toggle(); //манипуляции с menu по нажатию на settings
});
//закрытие подменю при клике в любом месте
$(document).on('click', function(){
   $('#menu').hide();
}

Должно сработать.

Answer 2

Предложу свой вариант решения

$(document).ready(function() { 
  $(".jq").click(function() { 
    $(".uller").hide(); 
    $(".jq").hide(); 
 
  }); 
  $("menu h3").click(function() { 
    $(".uller").show(); 
    $(".jq").show(); 
  }); 
});

* { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  text-decoration: none; 
} 
menu { 
  width: 300px; 
  margin: 20px; 
  background: #f1f1f1; 
  box-sizing: border-box; 
  text-align: center; 
  position: relative; 
} 
menu h3 { 
  width: 100%; 
  height: 50px; 
  line-height: 50px; 
  text-align: left; 
  background: darkblue; 
  color: #fff; 
  font-weight: normal; 
  position: relative; 
  font-size: 20px; 
  font-family: 'Open Sans', sans-serif; 
} 
menu h3 span { 
  padding-left: 30px; 
} 
menu h3:after { 
  content: ""; 
  display: block; 
  width: 50px; 
  height: 50px; 
  background: #fff url(http://simpleicon.com/wp-content/uploads/user1.png); 
  background-size: cover; 
  position: absolute; 
  top: 0; 
  right: 85px; 
} 
menu ul.a { 
  border-left: 1px solid darkblue; 
  border-top: 1px solid darkblue; 
  border-right: 1px solid darkblue; 
  border-radius: 3px 3px 0 0; 
  margin-top: 10px; 
} 
menu ul.a:after { 
  content: ""; 
  display: block; 
  width: 80%; 
  border-bottom: 1px solid darkblue; 
  position: absolute; 
  left: 10%; 
  bottom: 0; 
} 
.b { 
  border-left: 1px solid darkblue; 
  border-right: 1px solid darkblue; 
} 
menu ul.c { 
  border-left: 1px solid darkblue; 
  border-right: 1px solid darkblue; 
  border-bottom: 1px solid darkblue; 
  border-radius: 0 0 3px 3px; 
} 
menu ul.c:after { 
  content: ""; 
  display: block; 
  width: 80%; 
  position: absolute; 
  top: 0; 
  left: 10%; 
  border-top: 1px solid darkblue; 
} 
menu ul { 
  width: 70%; 
  margin: auto; 
  background: #fff; 
  position: relative; 
  text-align: left; 
} 
menu ul li { 
  height: 40px; 
  line-height: 40px; 
  padding-left: 20px; 
  position: relative; 
} 
menu ul li a { 
  font-size: 14px; 
  color: darkblue; 
  font-weight: 700; 
  position: relative; 
  z-index: 220; 
} 
menu ul li:hover a { 
  color: orange; 
} 
.uller { 
  background: ; 
  display: inline-block; 
  width: 80%; 
  display: none; 
} 
.jq { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: transparent; 
  z-index: 200; 
  display: none; 
} 
.uller {}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
 
<menu> 
  <h3><span>Профиль</span></h3> 
  <div class="uller"> 
    <ul class="a"> 
      <li> 
        <a href="">Моя страница</a> 
      </li> 
    </ul> 
    <ul class="b"> 
      <li> 
        <a href="">Редактировать</a> 
      </li> 
      <li> 
        <a href="">Настройки</a> 
      </li> 
      <li> 
        <a href="">Помощь</a> 
      </li> 
    </ul> 
    <ul class="c"> 
      <li> 
        <a href="">Выход</a> 
      </li> 
    </ul> 
  </div> 
  <div class="jq"></div> 
</menu> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Он подходит ? Песочница для наглядности

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

18:43

Продвижение своими сайтами как стратегия роста и независимости
22:46

Бизнесы, которым нужна ERP система
06:18
12:23
20:41

Как малому бизнесу конкурировать с маркетплейсами
06:31
21:28
22:18

Какой ноутбук Lenovo выбрать для студента
08:00

Все вопросы

ТОП-10

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

Прокрутка вниз на открывшийся блок

есть кнопка <button id="cb-btn" data-toggle="collapse" data-target="#cb">Кнопка</button> , которая раскрывает/закрывает блок <div id="cb" class="row collapse"><!-- Содержимое...

431

jQuery