Javascript - Stile Überschreiben, die zuvor in einer anderen Funktion deklariert

Ok, dies ist mein HTML -

<div id="plus" style="margin-left: 10px; margin-top: 303px;">
      <div id="plus-back"> </div>
      <div id="plus-ex"> X </div>
</div>

HINWEIS: die #plus - element inline-styles deklariert wurde previuously durch ein script

Und dies ist mein JS

document.getElementById("plus").onclick = showNav 
document.getElementById("plus-ex").onclick = hideNav

function showNav(){
    this.style.width="200px"
    this.style.height="200px"
    document.getElementById("plus-ex").style.display="block"
}
function hideNav(){
    document.getElementById("plus").style.width="48px"
    document.getElementById("plus").style.height="48px"
}

Gut.. das ist was ich habe. Das Ziel ist einfach, wenn Sie auf #plus dies erweitert ist, zeigen einige Inhalte, und erscheint ein "X", dass sich in #plus-ex, und wenn Sie auf das "X", #plus wieder an den start gehen (das ist ein div mit 48px Höhe und Breite Dank stylesheet). Das problem mit diesem ist, dass hideNav() ist nicht zu tun, eine gute Arbeit. Wenn Sie auf #plus, showNav() Funktion wird erfolgreich ausgelöst, aber nach, dass, wenn Sie klicken Sie auf die "X" und hideNav() ausgelöst wird (erfolgreich auch), dass sollte für die erste style, aber macht etwas. Ich habe getestet, die Anwendung einer anderen CSS-propieties wie background-color und arbeitet OK, aber nicht mit width und height.

Ich denke, dass das problem ist, dass ich Sie nicht überschreiben die Stile angewendet, indem showNav()

Was soll ich tun?

  • vielleicht ist das problem .style.display="block" ?
  • Nein, ich gelöscht .style.display="block" aber das problem bestehen.
  • <div> standardmäßig wird schrumpfen/wrap dessen Höhe auf der Grundlage Ihres Inhalts. Ich fürchte, Sie können nicht Ihre Höhe explizit.
InformationsquelleAutor Yavierre | 2013-08-18
  1. 4

    Das problem ist, wenn Sie auf X die Veranstaltung ist blubbernd an die #plus div. Sie können dies vermeiden, indem Sie aufrufen: 

    event.stopPropagation();

    Aktualisieren Sie den code, wie folgt, und probieren Sie es aus:

    document.getElementById("plus").onclick = showNav 
document.getElementById("plus-ex").onclick = hideNav

function showNav(){
    this.style.width="200px"
    this.style.height="200px"
    document.getElementById("plus-ex").style.display="block" //Don't need this line as it's a block element i.e. already a div

    event.stopPropagation(); //add this line
}
function hideNav(){
    document.getElementById("plus").style.width="48px"
    document.getElementById("plus").style.height="48px"

    event.stopPropagation(); //add this line
}
    • toll, habe ich nicht gedacht.
    • DAS FUNKTIONIERT! ich wusste nicht, über "sprudeln", und event.stopPropagation() haben einen bug im IE, aber ich habe eine Lösung gefunden. Danke!
    InformationsquelleAutor vee
Schreibe einen Kommentar