单击外部时滑动面板关闭 [英] Slide panel close on click outside

问题描述

我想在点击外部或内部的 X 按钮后关闭滑动面板，我有工作代码，但有一个问题，如果面板内部有任何带有类或 ID 的元素，点击它面板也会关闭.这是我的小提琴 https://jsfiddle.net/ayfsgje1/1/

和我的代码:

const open = document.getElementById("open")const slide = document.getElementById("slide")const close = document.getElementById("close")open.onclick = function() {slide.classList.toggle("active")}document.onclick = 函数(e){if(e.target.id !== "slide" && e.target.id !== "open") {slide.classList.remove("active")}}

.main {最大宽度:600px；溢出:隐藏；}#滑动 {位置:绝对；顶部:0;右:0;宽度:400px；高度:100vh；变换:translateX(100%);边框:1px 实心；}#slide.active {变换:translateX(0);}

<span id="open">点击打开</span><div id="幻灯片"><div id="关闭">X</div><span class="text">Lorem ipsum dolor sat amet consectetur adipisicing elit.Exeritationem incidunt asperiores quo architecto consectetur pariatur illum amet recusandae quod repudiandae eum neque, illo minus culpa aut voluptatibus dicta.Aspernatur，soluta?</span>Aliquid，坐别名.Veniam ullam deleniti aut ipsum ipsa repudiandae architecto tempora suscipit voluptates?Earum quaerat nam dignissimos cumque perspiciatis 假设?Exercitationem aspernatur officiis velearum consequatur illo ullam minima！

解决方案

使用稍微修改的结构.还可以通过添加 || 为 close 添加定位close.contains(e.target) 到 if () { ... } 条件.像这样:

!slide.contains(e.target) &&!open.contains(e.target)) ||close.contains(e.target)

它运行可靠.

const open = document.getElementById("open");const slide = document.getElementById("slide");const close = document.getElementById("close");open.onclick = 函数 () {slide.classList.toggle("active");};document.onclick = 函数 (e) {if (!slide.contains(e.target) && !open.contains(e.target) || close.contains(e.target)) {slide.classList.remove("active");}};

.main {最大宽度:600px；溢出:隐藏；}#滑动 {位置:绝对；顶部:0；右:0；宽度:400px；高度:100vh；变换:translateX(100%);边框:1px 实心；}#slide.active {变换:translateX(0);}

<span id="open">点击打开</span><div id="幻灯片"><div id="关闭">X</div><span class="text">Lorem ipsum dolor 坐 amet consectetur adipisicing 精英.Exeritationem incidunt asperiores quo architecto consectetur pariatur illum amet recusandae quod repudiandae eum neque, illo minus culpa aut voluptatibus dicta.Aspernatur，soluta?</span>Aliquid，坐别名.Veniam ullam deleniti aut ipsum ipsa repudiandae architecto tempora suscipit voluptates?Earum quaerat nam dignissimos cumque perspiciatis 假设?Exeritationem aspernatur officiis velearum consequatur illo乌兰最低点！

I want to close slide panel after click outside it or on X button inside, I have working code but there is one issue, if inside panel there is any element with class or ID after click on it panel also is closed. Here is my fiddle https://jsfiddle.net/ayfsgje1/1/

and my code:

const open = document.getElementById("open")
const slide = document.getElementById("slide")
const close = document.getElementById("close")

open.onclick = function() {
    slide.classList.toggle("active")
}

document.onclick = function(e) {
    if(e.target.id !== "slide" && e.target.id !== "open") {
        slide.classList.remove("active")
    }
}

.main {
  max-width:600px;
  overflow:hidden;
}
#slide {
  position:absolute;
  top:0;
  right:0;
  width:400px;
  height:100vh;
  transform: translateX(100%);
  border: 1px solid;
}
#slide.active {
  transform: translateX(0);
}

<div class="main">
  <span id="open">Click to open</span>
  <div id="slide">
    <div id="close">X</div>
    <span class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem incidunt asperiores quo architecto consectetur pariatur illum amet recusandae quod repudiandae eum neque, illo minus culpa aut voluptatibus dicta. Aspernatur, soluta?
   </span>
    Aliquid, sit alias. Veniam ullam deleniti aut ipsum ipsa repudiandae architecto tempora suscipit voluptates? Earum quaerat nam dignissimos cumque perspiciatis assumenda? Exercitationem aspernatur officiis vel earum consequatur illo ullam minima!
    
  </div>
</div>

解决方案

Use a slightly modified structure. Also add targeting for the close by adding || close.contains(e.target) to the if () { ... } condition. Like this:

!slide.contains(e.target) && !open.contains(e.target)) || close.contains(e.target)

It works reliably.

const open = document.getElementById("open");
const slide = document.getElementById("slide");
const close = document.getElementById("close");

open.onclick = function () {
    slide.classList.toggle("active");
};

document.onclick = function (e) {
    if (!slide.contains(e.target) && !open.contains(e.target) || close.contains(e.target)) {
        slide.classList.remove("active");
    }
};

.main {
    max-width: 600px;
    overflow: hidden;
}

#slide {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 100vh;
    transform: translateX(100%);
    border: 1px solid;
}

#slide.active {
    transform: translateX(0);
}

<div class="main">
    <span id="open">Click to open</span>
    <div id="slide">
        <div id="close">X</div>
        <span class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem incidunt asperiores quo architecto consectetur pariatur illum amet recusandae quod repudiandae eum neque, illo minus culpa aut voluptatibus dicta.
            Aspernatur, soluta?
        </span>
        Aliquid, sit alias. Veniam ullam deleniti aut ipsum ipsa repudiandae architecto tempora suscipit voluptates? Earum quaerat nam dignissimos cumque perspiciatis assumenda? Exercitationem aspernatur officiis vel earum consequatur illo
        ullam minima!
    </div>
</div>

这篇关于单击外部时滑动面板关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！