通过单击按钮打开div，通过仅使用CSS单击外部来关闭div

Question

我目前有一个打开和关闭div的按钮。我想改进这个功能:我希望div在按下div时也能关闭。在CSS和HTML中可以做到这一点吗？

它用于按钮'top-bar-btn settings‘：

编辑

<div class="top-bar-btn" id="top-bar-btn">
  <button class="top-bar-btn create"
          title="Créer une nouvelle discussion">
          <!--(click)="onCreateChatWindow()">-->
    <i class="glyphicon glyphicon-edit"></i>
  </button>


  <button class="top-bar-btn settings"
          title="Réglages"
          (click)="onSettingsChatWindow()">
    <i class="glyphicon glyphicon-cog"></i>
  </button>
  <div id="outside" (click)="hide()"></div>

  <button class="top-bar-btn reduce"
          title="Réduire la fenêtre"
          (click) = "onReduceChatThreads()">
    <i class="glyphicon glyphicon-minus"></i>
  </button>
</div>

​

 <div class="settings-notification"
   id="settings-notification">
<div class="tr triangle">
  <div class="tr inner-triangle">
  </div>
</div>
<div class="sound-signal">
  Signal sonore :
  <input type="radio" name="soundsignal" id="soundsignal1" checked="checked">
  <label for="soundsignal1">Oui</label>
  <input type="radio" name="soundsignal" id="soundsignal2">
  <label for="soundsignal2">Non</label>
</div>

<div class="flash-signal">
  Signal visuel :
  <input type="radio" name="flashsignal" id="flashsignal1" checked="checked" (click)="flashSignal()">
  <label for="flashsignal1">Oui</label>
  <input type="radio" name="flashsignal" id="flashsignal2" (click)="notFlashSignal()">
  <label for="flashsignal2">Non</label>
</div>

​

#outside{
display:none;
height:100%;
width:100%;
position:fixed;
top:0px;
left:0px;
z-index:1;
}


hide(): void {
    document.getElementById('outside').style.display = 'none';
    document.getElementById('settings-notification').style.display = 'none';
}

onSettingsChatWindow(): void {
    document.getElementById('outside').style.display = 'block';
    document.getElementById('chat-threads').classList.toggle('display-settings');
}

我不明白为什么它不能工作。这只起作用一次，并且在div不再显示之后。你知道为什么吗？

Answer 1

你不能显示/隐藏，移动...仅使用CSS或HTML的对象。但是你可以使用JavaScript。用display:none;创建两个div一个是你想要显示的div，另一个是z-index ( height和100% )，z-index小于div你想要显示/隐藏但比任何其他元素更多的元素，以及position:fixed;)在div中表示背景添加onclick="hide()"，当你在你的div之外单击时，它将调用一个函数<代码>D9onclick="hide()">。并且只需添加函数hide()，这将使两个div-s消失。

​

function myFunction(){
document.getElementById("outside").style.display = "block";
document.getElementById("myDiv").style.display = "block";
}

function hide(){
document.getElementById("outside").style.display = "none";
document.getElementById("myDiv").style.display = "none";
}

#outside{
display:none;
height:100%;
width:100%;
position:fixed;
top:0px;
left:0px;
z-index:1;
}

#myDiv{
background:red;
width:300px;
height:100px;
position:absolute;
top:100px;
left:100px;
display:none;
z-index:2;
}

<button onclick="myFunction()">Show div</button>
<p><span>some text</span></p>
<p><span>some text</span></p>
<p><span>some text</span></p>
<p><span>some text</span></p>
<p><span>some text</span></p>
<div id="outside" onclick="hide()"></div>
<div id="myDiv"></div>

​

Answer 2

只使用超文本标记语言和CSS是不可能的，但是这个JavaScript应该可以做到：

window.onclick = function(event) {
  if (!event.target.matches('#settings-notification')) {
    document.getElementById('chat-threads').classList.toggle('display-
    settings');
  }
}

当用户单击任意位置时，脚本会检查用户是否单击了div或页面的其余部分。如果是页面的其余部分，则关闭div。