Der Wechsel von „Ausgeblendet anzeigen' zu „Block anzeigen, wenn der Fokus nicht funktioniert' funktioniert

Question

Ich versuche, mein „Suchleisten-Dropdown“ anzuzeigen, wenn auf „Suchleisteneingabe“ geklickt wird, aber das funktioniert nicht. Weiß jemand, was los ist? Danke! Im Bild können Sie sehen, dass sich die Hintergrundfarbe ändert, wenn die Eingabe den Fokus erhält, das Dropdown-Menü jedoch nicht angezeigt wird.

.searchbardropdown{
  display: none;
}
.searchbarinput:focus .searchbardropdown{
  display: block;
}
.searchbarinput:focus{
  background-color: red;
}

<div class="searchbarcontainer">
    <script src="searchbar.js"></script>
    <div class="searchbar">
    </div><input class="searchbarinput" id="searchbarinput" type="text" placeholder="Pesquisar.."><button class="serchbarbutton" type="submit"><i class="material-symbols-outlined searchbarbuttonicon">search</i></button>
    <div class="searchbardropdown">
        <a class="dropdowna" href="#">// Trocar Variaveis<br></a>
        <a class="dropdowna" href="#trocarvariaveis">// Celsius para Farenheit<br></a>
        <a class="dropdowna" href="#celsiusparafarenheit">// Farenheit para Celsius<br></a>
        <a class="dropdowna" href="#farenheitparacelsius">// Area Circulo<br></a>
        <a class="dropdowna" href="#areacirculo">// Par ou Impar<br></a>
        <a class="dropdowna" href="#parouimpar">// Intervalo entre numeros<br></a>
        <a class="dropdowna" href="#intervalo">// Intervalo entre maior e menor de vetor<br></a>
        <a class="dropdowna" href="#intervalovetor">// Maior e menor numero<br></a>
        <a class="dropdowna" href="#maiormenor">// Paisagem ou retrato<br></a>  
        <a class="dropdowna" href="#paisagemouretrato">// Fizz ou Buzz<br></a>
        <a class="dropdowna" href="#fizzbuzz">// String do objeto<br></a>
        <a class="dropdowna" href="#stringobject">// Par ou impar ate limite<br></a>
    </div>
</div>

Answer 1

您应该使用倾斜（~）选择器来选择同级。

  .searchbardropdown{
    display: none;
  }
  .searchbarinput:focus ~ .searchbardropdown{
    display: block;
  }
  .searchbarinput:focus{
    background-color: red;
  }

 

            
            

            
search
            

                // Trocar Variaveis

                // Celsius para Farenheit

                // Farenheit para Celsius

                // Area Circulo

                // Par ou Impar

                // Intervalo entre numeros

                // Intervalo entre maior e menor de vetor

                // Maior e menor numero

                // Paisagem ou retrato
  
                // Fizz ou Buzz

                // String do objeto

                // Par ou impar ate limite