when I click to outside the section it's perfectly closing but I am trying to change any quanti-CodePudding

I am closing guest section when I click to outside the section it's perfectly closing but unfortunately I am trying to change any adults or click inside the div but it is closing to guest section please help me how can resolve that thanks.

Note:- Guest section should not be closed when I click to inside section or any change to quantity.

html view

                            <div id="guest-section" hidden>
                                <div class="_t0tx82">
                                    <div class="_1lmb2fq" >Adults</div>
                                        <div  id="searchFlow-subtitle-label-stepper-adults"><p>Ages 13 or above</p></div>
                                </div>
                                <div class="">
                                    <div class="input-group adult-input">
                                        <span class="input-group-btn">
                                            <button type="button" class="quantity-left-minus btn btn-default  btn-number "  data-type="minus" data-field="">
                                              <span class="glyphicon glyphicon-minus"></span>
                                            </button>
                                        </span>
                                        <input type="text" id="quantity" name="quantity" class="form-control input-number quantity" value="0" min="1" max="10" >
                                        <span class="input-group-btn">
                                            <button type="button" class="quantity-right-plus btn btn-default  btn-number" data-type="plus" data-field="">
                                                <span class="glyphicon glyphicon-plus"></span>
                                            </button>
                                        </span>
                                    </div>
                                </div>
                                <hr>
                                <div class="_t0tx82">
                                    <div class="_1lmb2fq" >Children</div>
                                        <div  id="searchFlow-subtitle-label-stepper-adults"><p>Ages 2–12</p></div>
                                </div>
                                <div class="">
                                    <div class="input-group adult-input">
                                        <span class="input-group-btn">
                                            <button type="button" class="quantity-left-minuss btn btn-default  btn-number"  data-type="minus" data-field="">
                                              <span class="glyphicon glyphicon-minus"></span>
                                            </button>
                                        </span>
                                        <input type="text" id="quantityy" name="quantity" class="form-control input-number quantity" value="0" min="1" max="10">
                                        <span class="input-group-btn">
                                            <button type="button" class="quantity-right-pluss btn btn-default  btn-number" data-type="plus" data-field="">
                                                <span class="glyphicon glyphicon-plus"></span>
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </div>

jquery

$(document).click(function(e) {
    if(!$(e.target).is('#guest-section')) {
        $("#guest-section").hide();
    }
  });

CodePudding user response：

Try this:
You need to Check click area is not in the targeted element

  $(document).click(function (e) {
        if ($(e.target).parents("#guest-section").length === 0) {
            $("#guest-section").hide();
        }
    });