Question

我目前有一个打开和关闭div的按钮。我想改进这个功能：我希望div在关闭除div之外时也关闭。是否可以在CSS和HTML中执行此操作？

按钮＆＃39; top-bar-btn设置＆＃39; ：

编辑

<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>

＆GT;

#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，另一个是背景（width和height 100%，z-index小于{{ 1}}你想显示/隐藏但比div里面的position:fixed;更多代表背景添加div并且每次调用函数onclick="hide()"你点击你的div外面。只需添加将hide() - s消失的函数hide()。

＆＃13;

div

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

仅使用HTML和CSS是不可能的，但是这个JavaScript应该这样做：

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

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

单击按钮打开div，只使用CSS

2 个答案: