Question

我的代码执行此操作：单击元素.pencil时，它将切换隐藏的元素.pencilpanel。在此 .test元素（有两个.test元素）之外单击时，应隐藏 this .pencilpanel。

但是，我的问题是：

1）单击第二个.test元素时，应该隐藏第一个.test元素时它仍然可见。而且，

2）当单击第一个.pencil元素，并且还单击了其相应的.pencilpanel时，它会隐藏 .pencilpanel，当它是< em>应该保持可见。 .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 () {
  $('.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");        
  });    
});

Answer 3

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

单击元素外部以隐藏元素

3 个答案: