焦点不起作用时从显示隐藏更改为显示块

Question

我试图让我的“searchbardropdown”在单击“searchbarinput”时显示，但这不起作用。有谁知道这是怎么回事？谢谢！ 在图中，您可以看到当输入获得焦点时背景颜色发生变化，但下拉列表不显示。

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

 

            sssccc
            

            
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