切换点击功能时隐藏ID，再次切换功能时显示？

Question

我需要一些帮助：JSfiddle。问题是，每当 class .active 打开时，我想要 display:none 按钮，或者以某种方式隐藏 - 如果这有意义的话？

如果你看我的 JSfiddle，我需要按钮 top/right 消失，当滑出 menu/box 出来时。

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

谢谢！

Answer 1

将您的 Js 更改为：

$('#button').click(function(e){
    $('#slide-in').addClass('active');
  if($('#slide-in').not(':hidden').length > 0)
    $('#button').hide();
});

$('#slide-in').click(function(e){
    $(e.currentTarget).removeClass('active');
  $('#button').show();
});

当您点击该按钮时，您的左侧菜单会淡入并且该按钮会消失。当您单击打开的菜单时，菜单将关闭，按钮将再次出现。

JSFiddle Link

Answer 2

您的代码运行良好。我看到的唯一问题是，如果您单击 slide-in 中具有其他 ID 的元素，它也会关闭您的 div。但是不知道是不是我想要的。

这是我所说的一个例子：

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

body {
 margin: 0;
 padding: 0;
}

#slide-in {
    position: fixed;
    z-index: 10;
    top: 0;
    width: 300px;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    box-shadow: inset -10px 0 5px -5px rgba(0,0,0,0.2);
    transition-property: margin-left;
    transition-duration: 0.6s;
    -webkit-transition-property: margin-left;
    -webkit-transition-duration: 0.6s;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0s;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: -300px;
}

#slide-in.active {
   margin-left: 0;
}

#button {
  position: fixed;
  top: 0;
  right: 0;
  margin: 20px;
  
  width: 25px;
  height: 25px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button"></div>
<div id="slide-in">
  <button id="eee">
    deded
  </button>
</div>

如果单击按钮 dedede 关闭 div。您可以使用此代码修复它：

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

body {
 margin: 0;
 padding: 0;
}

#slide-in {
    position: fixed;
    z-index: 10;
    top: 0;
    width: 300px;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    box-shadow: inset -10px 0 5px -5px rgba(0,0,0,0.2);
    transition-property: margin-left;
    transition-duration: 0.6s;
    -webkit-transition-property: margin-left;
    -webkit-transition-duration: 0.6s;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0s;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: -300px;
}

#slide-in.active {
   margin-left: 0;
}

#button {
  position: fixed;
  top: 0;
  right: 0;
  margin: 20px;
  
  width: 25px;
  height: 25px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button"></div>
<div id="slide-in">
  <button id="eee">
    deded
  </button>
</div>

Answer 3

只需在条件中分别隐藏和显示按钮即可。

    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();
      }
    });

这是Fiddle link

切换点击功能时隐藏ID，再次切换功能时显示？

Toggle hide ID on click function, show when function toggled again?

javascript

jquery

css

slidetoggle