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

我可能建议您为不希望它应用的元素添加一个类吗？

!$(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中更改此类

#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函数？

3 个答案: