是否可以在一个函数中列出多个 ID，这不会触发 .hide 函数

Is it possible to list multiple ID's in a function, that will not trigger a .hide function?

本文关键字：函数 ID hide 是否 一个      更新时间：2023-09-26

我的幻灯片菜单有问题。在这里检查我的 JSfiddle。在滑入式菜单关闭的那一刻，每当单击菜单本身以外的所有内容时。问题是，当我单击文本时，菜单会关闭。我想在同一个函数中列出更多的 ID，就像这样;

if(isOpened && e.target.id!='slide-in,text')

我的脚本：

 var isOpened = false;
    $(document).click(function(e) {
      if(isOpened && e.target.id!='slide-in') {
        $("#slide-in").removeClass("active");
        isOpened = false;
        $("#button").show();
      } else if(!isOpened && e.target.id=='button'){
        $("#slide-in").addClass("active");
        isOpened = true;
        $("#button").hide;
      }
    });

谢谢！

您可以使用数组和indexOf 

['slide-in', 'text'].indexOf(e.target.id) === -1

我可以建议你在你不希望它应用的元素中添加一个类吗？

!$(this).is('.someClass')

不是检查所有id，而是检查父级是否存在，id 作为slide-in 

if(isOpened && e.target.id!='slide-in') {
    if(!$(e.target).parents('#slide-in').length) {
        $("#slide-in").removeClass("active");
        isOpened = false;
        $("#button").show();
    }
}

检查这个小提琴

#slide-in {
  position: fixed;
  z-index: 10;
  top: 0;
  width: 300px;
  height: 100%;
  background-color: #eee;
  border-right: 10px solid #ccc;
  display:none;
}

并将其添加到.js 

$(document).ready(function(){
       $("#button").click(function(){
         $("#slide-in").show(300);
       })
       $("#slide-in").click(function(){
        $(this).hide(300);
       });
     });

如果你想要更真实的使用这个。在你的css像这样改变这个类

#slide-in {
      position: fixed;
      z-index: 10;
      top: 0;
      width: 0px;
      height: 100%;
      background-color: #eee;
      border-right: 10px solid #ccc;
      display:none;
    }

为了您的js 

$(document).ready(function(){
         $("#button").click(function(){
           $("#slide-in").animate({width: "300px"});
          });
         $("#slide-in").click(function(){
           $(this).animate({width: "0px"});
         });
     });
相关文章：