Öffnen Sie ein div, indem Sie auf eine Schaltfläche klicken, schließen Sie das div, indem Sie nur mit CSS außerhalb von

Question

klicken

Ich habe derzeit eine Schaltfläche, die ein Div öffnet und schließt. Ich möchte dieses Feature verbessern: Ich möchte das Div auch beim Drücken anderer als div schließen. Ist es möglich, dies in CSS und HTML zu tun?

Es ist für die Schaltfläche 'Top-bar-btn Einstellungen':

EDIT

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

Ich verstehe nicht, warum es nicht funktioniert. Dies funktioniert nur einmal und nachdem das div nicht mehr angezeigt wird. Weißt du, warum ?

Answer 1

Sie können Objekte nur mit CSS oder HTML ein-/ausblenden, verschieben .... Aber Sie können JavaScript verwenden. Machen Sie zwei divs mit display:none; ist Ihr div Sie zeigen möchten, und ein anderer ist Hintergrund (width und height100%, z-index weniger als div Sie zum Anzeigen/Verbergen aber mehr als jedes andere Element, und position:fixed;) innerhalb div, die Hintergrund darstellt füge onclick="hide()" hinzu und das ruft eine Funktion hide() auf, wenn du außerhalb deines div klickst. Und fügen Sie einfach die Funktion hide() hinzu, die beide div -s verschwinden lässt.

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

Es ist nicht möglich, mit nur HTML und CSS, aber das JavaScript sollte es tun:

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

Wenn der Benutzer überall klickt, wird das Skript überprüft, ob sie angeklickt auf dem Div oder auf dem Rest der Seite. Wenn es der Rest der Seite ist, schließt es das Div.