如何使用類名更改元素的可見性

Question

我有這個 class 名稱：

.mapboxgl-ctrl-geocoder {
  font-size: 18px;
  line-height: 24px;
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  position: relative;
  background-color: #fff;
  width: 100%;
  min-width: 240px;
  z-index: 1;
  border-radius: 4px;
  transition: width .25s, min-width .25s;
  right: 900px;
  visibility: hidden;
}

當前的可見性，我想讓它可見 onclick：

function search() {
  document.getElementsByClassName('mapboxgl-ctrl-geocoder')[0].style.visibility = "visible";
}

和

<a onclick="search()">Search</a>

但它似乎沒有工作，我不知道為什么。 有想法該怎么解決這個嗎？ 是的，我確實檢查了.mapboxgl-ctrl-geocoder是<element class="mapboxgl-ctrl-geocoder">而不是 ID。 謝謝！

Answer 1

單擊search按鈕時，您可以向元素添加類名。

//--- style ----//
.mapboxgl-ctrl-geocoder {
  font-size: 18px;
  line-height: 24px;
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  position: relative;
  background-color: #fff;
  width: 100%;
  min-width: 240px;
  z-index: 1;
  border-radius: 4px;
  transition: width .25s, min-width .25s;
  right: 900px;
  visibility: hidden;
}

.mapboxgl-ctrl-geocoder .show {
  visibility: visible;
}

//----- javascript code ------//

function search() {
  let el_mapboxgl = document.getElementsByClassName('mapboxgl-ctrl-geocoder')[0];
  el_mapboxgl.className += " show";
}

請讓我知道它是否有效。

Answer 2

添加這個-->

.mapboxgl-ctrl-geocoder .show {
  visibility: visible;
}

還有這個 javascript 代碼---->

function search() {
  let el_mapboxgl = document.getElementsByClassName('mapboxgl-ctrl-geocoder')[0];
  el_mapboxgl.className += " show";

Answer 3

它為您顯示，您只需向右偏移 900 像素，指定 0 像素或可見區域中所需的像素數（如果您在左側有它）！