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

Question

我的幻灯片菜单有问题。在这里检查我的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;
      }
    });

谢谢！

Answer 1

您可以使用数组和 indexOf

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

我是否建议您将 class 添加到您不想应用它的元素？

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

Answer 2

#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 中改变这个 class 像这样

#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"});
         });
     });

Answer 3

不是检查所有 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();
    }
}

检查这个fiddle

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

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

javascript

css

jquery

slidetoggle