Question

我在移动设备上隐藏了一个div有一些很好的帮助，但我还有一个问题。我开始学习更多JavaScript，绝对是新手。

这是除非单击按钮，否则隐藏在移动设备上的内容div的工作示例。它工作正常，除了最初打开div需要2次点击。我希望它只需点击一下。

我已经在这类问题上看到了一些答案，并尝试过这些问题，但现在我们无法理解它们。我没有得到它。

我如何修改我的脚本，只需点击一下按钮即可打开div？谢谢！

function toggleGallery() {
  var x = document.getElementById('image-gallery');
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}

#image-gallery {
  display: block;
  width: 600px;
  border: 1px solid black;
}

#image-gallery li {
  width: 150px;
  height: 150px;
  color: white;
  text-align: center;
  margin: 10px;
  background-color: gray;
  display: inline-block;
}

button {
  display: none;
}

@media (max-width: 600px) {
  #image-gallery {
    display: none;
    width: 100%;
  }
  button {
    display: block;
  }
}

<div class="container">
  <button onclick="toggleGallery()">Click to view images</button>
  <p>I want to reveal this content on mobile with just one button click. </p>
  <div id="image-gallery">
    <ul>
      <li>Image 1</li>
      <li>Image 2</li>
      <li>Image 3</li>
    </ul>
  </div>
</div>
<!--container-->

Answer 1

这是因为VBox root = new VBox(); RackControl control = new RackControl(8,12); root.getChildren().addAll(control); VBox.setVgrow(control, Priority.ALWAYS); Scene scene = new Scene(root, 320, 200); String css = this.getClass().getResource("rackcontrol.css").toExternalForm(); scene.getStylesheets().add(css); //Scene scene = new Scene((Parent) FXMLLoader.load(getClass().getResource("TestUI.fxml"))); primaryStage.setTitle("Custom control"); primaryStage.setScene(scene); primaryStage.show();仅返回x.style的内嵌样式。由于它没有内联样式，因此#image-gallery将始终评估为未定义。

您想要的实际上是获取元素的计算显示属性（即您在开发人员工具中看到的＆＃34;计算样式＆＃34;）。为此，您只需使用window.getComputedStyle(element)，即：x.style.display代替：

＆＃13;

window.getComputedStyle(x).display

＆＃13;

function toggleGallery() {
  var x = document.getElementById('image-gallery');
  var xDisplay = window.getComputedStyle(x).display;
  if (xDisplay === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}

＆＃13;

#image-gallery {
  display: block;
  width: 600px;
  border: 1px solid black;
}

#image-gallery li {
  width: 150px;
  height: 150px;
  color: white;
  text-align: center;
  margin: 10px;
  background-color: gray;
  display: inline-block;
}

#image-gallery {
  display: none;
  width: 100%;
}

button {
  display: block;
}

＆＃13;

Answer 2

在开始x.style.display = 'block';属性设置style时看不到css规则

Answer 3

在这里，你有不好的CSS

＆＃13;

var x = document.getElementById('image-gallery');

function toggleGallery() {
  x.style.display = x.style.display === 'none' ?
    "block" : 'none';
}

＆＃13;

  #image-gallery {
  display: block;
  width: 600px;
  border: 1px solid black;
}

#image-gallery li {
  width: 150px;
  height: 150px;
  color: white;
  text-align: center;
  margin: 10px;
  background-color: gray;
  display: inline-block;
}

@media (max-width: 600px) {
  #image-gallery {
    display: none;
    width: 100%;
  }
  button {
    display: block;
  }

＆＃13;

<div class="container">
  <button onclick="toggleGallery()">Click to view images</button>
  <p>I want to reveal this content on mobile with just one button click. </p>
  <div id="image-gallery">
    <ul>
      <li>Image 1</li>
      <li>Image 2</li>
      <li>Image 3</li>
    </ul>
  </div>

＆＃13;

Answer 4

在toggleGallery()函数中，将条件x.style.display === 'none'替换为x.style.display !== 'block'。

display属性最初不等于none，这意味着您的函数会在条件中将其设置为none，这意味着下次它将正常运行并将其设置为{{ 1}}。通过相当检查block不等于display，它将首次运行。

切换div需要2次点击。应该是1次点击

4 个答案: