enter image description here

The block element (#settings) responds to a click only if the click falls on an empty area. And if you directly click on the header (h1) or image, then this block element will not react to pressing. How to fix it?

<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>

    2 answers 2

    You have a strange code js. Try this:

     //ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ подмСню $('#settings').on('click', function(){ //событиС click Π½Π° Π±Π»ΠΎΠΊ settings $('#menu').toggle(); //манипуляции с menu ΠΏΠΎ Π½Π°ΠΆΠ°Ρ‚ΠΈΡŽ Π½Π° settings }); //Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ подмСню ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π² любом мСстС $(document).on('click', function(){ $('#menu').hide(); }

    It should work.

    • The code you offer is not as functional as I would like. The meaning of my code is that closing a submenu is performed not only when clicking on the block element (#settings), but also when clicking outside the submenu. - user226023 4:26
    • @ user226023 fix it now - Ep1demic
    • Your code does not work - user226023

    I will offer my solution

     $(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>

    Does he fit ? Sandbox for clarity