Нажмите за пределами элемента, чтобы скрыть элемент

Question

Мой код делает это: при нажатии на элемент .pencil переключается скрытый элемент .pencilpanel. Если щелкнуть за пределами этот элемент .test (имеется два элемента .test), то этот .pencilpanel должен скрыться.

Однако , мои проблемы заключаются в том, что:

1) При нажатии второго элемента .test первый элемент .test остается видимым, когда он должен бытьскрытый. И,

2) Если щелкнуть первый элемент .pencil и щелкнуть на соответствующем элементе .pencilpanel, он будет скрыть .pencilpanel, когда он предполагается чтобы оставаться видимым. Любой элемент, который в настоящее время виден в пределах .test, и, если щелкнуть по нему, не должен быть скрытым, , если , который щелкнул по элементу, находится вне от текущий .test элемент.

Так что я не понимаю, почему при нажатии на .pencilpanel он скрывает его в этой строке if(!$(this).closest('.test').length && $('.pencilpanel').is(":visible")) {. И тот факт, что первый .pencilpanel остается видимым, когда он должен быть скрыт всякий раз, когда нажимается другой .pencil. Это мой код:

$(document).ready(function () {
    $('.pencil').on('click', function (event) {
        event.stopPropagation();
        $(this).parent(".btsdiv").next(".fcmdiv").children(".pencilpanel").toggleClass("displayblock");
    });
});

$(document).ready(function () {
    $(document).click(function () {
        if (!$(this).closest('.test').length && $('.pencilpanel').is(":visible")) {
            $('.pencilpanel').removeClass("displayblock");
        }
    });
});

.pencilpanel {
    display: none;
}

.displayblock {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
    <div class="btsdiv">
        <div class="pencil">&#9998;</div>
    </div>
    <div class="fcmdiv">
        <div class="pencilpanel">
            <textarea></textarea>
        </div>
    </div>
</div>

<div class="test">
    <div class="btsdiv">
        <div class="pencil">&#9998;</div>
    </div>
    <div class="fcmdiv">
        <div class="pencilpanel">
            <textarea></textarea>
        </div>
    </div>
</div>

Answer 1

Вы можете использовать document.activeElement для проверки перед закрытием панелей. Пожалуйста, найдите измененный код.

$(document).ready(function() {

  $('.pencil').on('click', function(event) {
    event.stopPropagation();
    closePanel();
    $(this).closest(".test").find(".pencilpanel").toggleClass("displayblock");
  });

  $(document).on("click", function() {
    if (document.activeElement.tagName != 'TEXTAREA')
      closePanel();
  });

});


function closePanel() {
  $('.pencilpanel').removeClass("displayblock");
}

.pencilpanel {
  display: none;
}

.displayblock {
  display: block;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class="test">
  <div class="btsdiv">
    <div class="pencil">&#9998;</div>
  </div>
  <div class="fcmdiv">
    <div class="pencilpanel">
      <textarea></textarea>
    </div>
  </div>
</div>

<div class="test">
  <div class="btsdiv">
    <div class="pencil">&#9998;</div>
  </div>
  <div class="fcmdiv">
    <div class="pencilpanel">
      <textarea></textarea>
    </div>
  </div>
</div>

Answer 2

$(document).ready(function () {
$('.pencilpanel').hide();
    $('.pencil').on('click', function (event) {
        event.stopPropagation();
        var elm=$(this).parent(".btsdiv").next(".fcmdiv").children(".pencilpanel");
        $('.pencilpanel').not(elm).hide();
        if(elm.css('display') == 'none') elm.css('display','inline-block');
        else elm.css('display','none');
    });
    
    $("*").on('click',function (event) {
        event.stopPropagation();
        if($(this).hasClass("pencil")) return;
        if($(this).hasClass("pencilpanel")) return;
        if($(this).parent().hasClass("pencilpanel")) return;
        $('.pencilpanel').hide();
    });
    
});

.pencil {
    cursor: pointer;
}

.pencil, .pencilpanel {
    display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
    <div class="btsdiv">
        <div class="pencil">&#9998;</div>
    </div>
    <div class="fcmdiv">
        <div class="pencilpanel">
            <textarea></textarea>
        </div>
    </div>
</div>
<div class="test">
    <div class="btsdiv">
        <div class="pencil">&#9998;</div>
     <br>
    </div>
    <div class="fcmdiv">
        <div class="pencilpanel">
            <textarea></textarea>
        </div>
    </div>
</div>

Answer 3

$(document).ready(function () {
  $('.pencil').on('click', function (event) {
    event.stopPropagation();
    $('.pencilpanel').removeClass("displayblock");
    $(this).parent().siblings().children(".pencilpanel").addClass("displayblock"); 
  });

  $(".pencilpanel").click(function () {
     event.stopPropagation();          
  });

  $(document).click(function () {
     $('.pencilpanel').not(":focus").removeClass("displayblock");        
  });    
});