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

Question

我需要一些帮助：JSfiddle。 问题是，我希望按钮显示：无，或以某种方式隐藏，只要类.active isOpened - 如果这有意义吗？

如果你看看我的JSfiddle，我需要按钮顶部/右边消失，当滑出的菜单/框出来时。

 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

只需在条件中隐藏并显示按钮。

    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

Answer 2

用以下内容更改您的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 3

您的代码运行正常。我看到的唯一问题是，如果你用其他id点击slide-in中的元素，它也会关闭你的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>