通过单击外部将其关闭，但要考虑到元素异常 [英] close a block by clicking outside it, but taking into account the element exception

问题描述

我有一个图块，并且有一种标准的解决方案，可通过在图块的区域外单击来关闭它.它可以工作，但是在该块上有一个子元素，通过单击该子元素可以关闭主块.目前，点击此子项不会发生.像此代码示例一样，为子级设置一个例外.我这样尝试-$(.menu_close").has(e.target).length！== 0，并没有帮助，以及$(.menu_close").has(e.target) .length == 1.同样的情况.

I have a block, and there is a standard solution for closing a block by clicking outside its area. It works, but on this block there is a child element, by clicking on which the main block should be closed. At the moment, clicking on this child does not happen. As in this code example, set an exception for the child. I tried like this - $(".menu_close").has(e.target).length !== 0, and does not help, as well as $(".menu_close").has(e.target).length == 1. The same situation.

$(document).mouseup(function (e){ 
    if (!$(".header_content_one_menu").is(e.target) && $(".header_content_one_menu").has(e.target).length === 0) {
       $('#header_menu_adaptive').prop('checked', false);
    }
  });

#header_menu_adaptive {
    display: none;
}

.header_menu_adaptive_button {
    display: flex;
    align-items: center;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 999999;
    padding: 0 20px 0 0;
}

#header_menu_adaptive:checked ~ .header_menu_adaptive_button > span {
    transform: rotate(45deg);
    visibility: hidden;
    transition: 0.05s;
}

#header_menu_adaptive:checked ~ .header_menu_adaptive_button> span::before {
    top: 0;
    transform: rotate(0);
    visibility: visible;
}

#header_menu_adaptive:checked ~ .header_menu_adaptive_button > span::after {
    top: 0;
    transform: rotate(90deg);
    visibility: visible;
}

.header_menu_adaptive_button > span::after {
    content: '';
    top: 28px;
    width: 50px;
    height: 2px;
    background-color: #B72A20;
    transition-duration: .25s;
}

#header_menu_adaptive:checked ~ .header_content_one_menu {
    visibility: visible;
    left: 0;
}

.header_menu_adaptive_button > span, .header_menu_adaptive_button> span::before, .header_menu_adaptive_button > span::after {
    display: flex;
    justify-content: center;
    width: 50px;
    position: absolute;
    text-transform: uppercase;
    color: #B72A20;
    font-family: RobotoCondensed;
    letter-spacing: 2.4px;
    transition-duration: .25s;
    font-size: 16px;
    z-index: 11112;
}

.header_menu_adaptive_button > span::before {
    content: '';
    bottom: 29px;
    width: 50px;
    height: 2px;
    background-color: #B72A20;
    transition-duration: .25s;
}



.header_content_one_menu {
    display: grid;
    grid-row-gap: 20px;
    position: absolute;
    visibility: hidden;
    top: 0;
    border-radius: 0 0 0 0;
    left: -100%;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 40px 0 40px 0;
    background-color: yellow;
    transition-duration: .25s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="header_menu_adaptive" type="checkbox">
<label class="header_menu_adaptive_button" for="header_menu_adaptive">
                        <span>меню</span>
</label>
<ul class="header_content_one_menu">                       
<li class=""><a href="" class="header_content_one_menu_unit">111</a></li><li class=""><a href="" class="header_content_one_menu_unit">222</a></li><li class=""><a href="" class="header_content_one_menu_unit">333</a></li><li class=""><a href="" class="header_content_one_menu_unit">444</a></li><li class=""><a href="" class="header_content_one_menu_unit">555</a></li><li class=""><a href="" class="header_content_one_menu_unit">666</a></li>
                    </ul>

推荐答案

function closeMenu(e) {
    if (jQuery(e.target).closest('.header_content_one_menu').length === 0) {
        console.log('close');
      jQuery('#header_menu_adaptive').prop('checked', false); //This is close menu
      jQuery('.header_menu_adaptive_button').removeClass('opened');
      jQuery(document).off('click', closeMenu);
   }
}

jQuery('.header_menu_adaptive_button').click(function (e){
        if (jQuery('.header_menu_adaptive_button').hasClass('opened')) {
        jQuery('.header_menu_adaptive_button').removeClass('opened');
      jQuery(document).off('click', closeMenu);
      
        return;
    }
    
    jQuery('.header_menu_adaptive_button').addClass('opened');
    
        setTimeout(function() {
        jQuery(document).on('click', closeMenu);
    }, 100)
});

这篇关于通过单击外部将其关闭，但要考虑到元素异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！