it-swarm.com.de

Kann ich die Schaltfläche in einer anderen Schaltfläche verschachteln?

Dies ist ein Problem, das sich aus dem Versuch ergibt, meine HTML-Semantik so korrekt wie möglich zu halten.

Ich habe eine übergeordnete Schaltfläche, die eine Funktion auf derselben Seite ausführt und als übergeordnetes Tag für einen großen Container dient, der einen Anker verschachtelt, der auf eine andere Seite umleitet, und ein div-Tag, das auch als übergeordnetes Element für eine andere Schaltfläche fungiert Das soll einige Aktionen ausführen.

<button>
  <div id="the-most-big-container"
    <a href="http://www.RedirectMeToAnotherPage.com"></a>
   <div>
     <button> do some action </button>
   </div>
  </div>
</button>

Ich habe versucht, den Button zu verschachteln, gab ihm eine Klasse und eine ID und keine der Eigenschaften, die ich auf die Klasse anwendete, und die ID wird auf dem untergeordneten Button ausgeführt. Mehr Auch der untergeordnete Button kommt vollständig aus dem großen Container heraus und legt sich in den DOM ist genau wie es ein komplettes unabhängiges Tag, das von keinem anderen Tag geschachtelt wird. 

[Update]

Anscheinend ist es verboten, einen Button in einen anderen zu verschachteln, aber ich hätte gerne eine Erklärung dafür, warum das Verhalten der verschachtelten Buttons nicht auf die CSS-Stile anspricht und wie genau sie sich jetzt in Bezug auf das DOM verhält tag von selbst oder was?

Auch jetzt werde ich gezwungen sein, das übergeordnete Button-Tag in ein anderes Tag zu ändern, damit ich untergeordnete Buttons darin verschachteln kann. Ich hätte gerne einen Vorschlag für ein Ersatz-Tag für das übergeordnete Button-Tag Ex: Ich könnte den übergeordneten Button in ein div-Tag umwandeln. 

aber ich brauche ein Tag, das semantisch beschreibender wäre (etwas anderes als nur ein div). Ich hatte diese übergeordnete Schaltfläche an erster Stelle, um als Umschaltfläche zu fungieren, so dass beim Klicken auf diese Schaltfläche der größte Teil angezeigt und ausgeblendet wird. container-div.

7
AndrewMk

Es ist nicht gültig, einen <button> in ein <button>-Element einzufügen.
In der WC3-Empfehlung für das Schaltflächenelement können Sie lesen:

Inhaltsmodell:
Phrasing-Inhalt, es darf jedoch kein interaktiver Content-Nachkomme sein. [Quelle: w3.org ]

Interaktiver Inhalt beinhaltet:

  • ein 
  • audio (wenn das Steuerelement-Attribut vorhanden ist) 
  • taste 
  • einbetten 
  • iframe 
  • img (wenn das usemap-Attribut vorhanden ist) 
  • eingabe (wenn das Typattribut nicht verborgen ist) 
  • keygen 
  • etikette 
  • objekt (wenn das Usemap-Attribut vorhanden ist) 
  • wählen 
  • textbereich 
  • video (wenn das Steuerelement-Attribut vorhanden ist)
7
web-tiki

Du kannst das nicht machen. Eine Schaltfläche soll keine anderen Elemente enthalten .. Sie können ein div-Element jedoch so gestalten, dass es wie eine Schaltfläche wirkt und wie es sich anfühlt.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <div class="btn btn-default">
        outer button
        <br />

        <button class="btn btn-primary">
            inner button
        </button>
    </div>
</body>
</html>

0
Bender