焦點不起作用時從顯示隱藏更改為顯示區塊

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