Question

我已经开始制作手风琴菜单，html：

import java.util.concurrent.CountDownLatch;
import java.util.concurrent.ExecutionException;
import java.util.concurrent.FutureTask;

import org.w3c.dom.Document;

import javafx.application.Platform;
import javafx.concurrent.Worker;
import javafx.concurrent.Worker.State;
import javafx.embed.swing.JFXPanel;
import javafx.scene.web.WebEngine;

public class WebEngineProblem {

    public static void main(String[] args) throws InterruptedException, ExecutionException {
        new JFXPanel(); // Initialise the JavaFx Platform

        CountDownLatch loaded = new CountDownLatch(1);

        FutureTask<WebEngine> createEngineTask = new FutureTask<WebEngine>( () -> {
            WebEngine webEngine = new WebEngine();
            final Worker<Void> loadWorker = webEngine.getLoadWorker();
            loadWorker.stateProperty().addListener((obs, oldValue, newValue) -> {
                System.out.println("state:" + newValue);
                if (newValue == State.SUCCEEDED) {
                    System.out.println("finished loading");
                    loaded.countDown();
                }    
            });
            webEngine.loadContent("<!DOCTYPE html>\r\n" + "<html>\r\n" + "<head>\r\n" + "<meta charset=\"UTF-8\">\r\n"
                + "<title>Content Title</title>\r\n" + "</head>\r\n" + "<body>\r\n" + "<p>Body</p>\r\n" + "</body>\r\n"
                + "</html>\r\n");
            return webEngine ;
        });

        Platform.runLater(createEngineTask);
        WebEngine engine = createEngineTask.get();
        loaded.await();

        Platform.runLater(() -> {
            Document doc = engine.getDocument();
            String content = doc.getDocumentElement().getTextContent();
            System.out.println(content);
        });
    }

}

使用css：

<button class="accordion">New Attendees</button>
<div class="panel">
    <p>How do I get started?</p>
    <p>I'm stuck! Where can I get help?</p>
 </div>
 <button class="accordion">Instrument Simulations</button>
 <div class="panel">
    <p>What are some tools I can use?</p>
    <p>How can I obtain an estimate?</p>
</div>

我已经使用javascript来为它提供功能：

.accordion:after {
    content: "\002B";
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.accordion:hover {
    background-color: #333;
    color: white;
}

.active {
    background-color: #333;
    color: white;
}

.active:after {
    content: "\2212";
}

.panel {
    padding: 18px;
    background-color: white;
    display: none;
    transition: 0.2s ease-out;
}

现在，所有手风琴都在页面加载时折叠，但我希望它们默认打开。什么是默认打开它们的好方法？我以为我可以将css切换到.panel（display：block;}但是这似乎把所有其他东西弄得太乱了。想法呢？

Answer 1

Javascript适用于元素本身，因此应该在html上应用style属性，并将其插入到css文件中。这就是为什么它搞乱了。

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        /* Toggle between adding and removing the "active" class,
        to highlight the button that controls the panel */
        this.classList.toggle("active");

        /* Toggle between hiding and showing the active panel */
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
}

.accordion:after {
    content: "\002B";
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.accordion:hover {
    background-color: #333;
    color: white;
}

.active {
    background-color: #333;
    color: white;
}

.active:after {
    content: "\2212";
}

.panel {
    padding: 18px;
    background-color: white;
    display: none;
    transition: 0.2s ease-out;
}

<button class="accordion active">New Attendees</button>
<div class="panel" style="display:block;">
    <p>How do I get started?</p>
    <p>I'm stuck! Where can I get help?</p>
 </div>
 <button class="accordion active">Instrument Simulations</button>
 <div class="panel" style="display:block;">
    <p>What are some tools I can use?</p>
    <p>How can I obtain an estimate?</p>
</div>

Answer 2

将切换放入一个函数中，并为脚本部分末尾的每个手风琴调用它。您可以通过将一个按钮和一个面板放在一个div容器中来避免切换布局。然后将float: left应用于所有容器。看起来应该是这样的：

＆＃13;

function toggle(acc) {
  /* Toggle between adding and removing the "active" class,
      to highlight the button that controls the panel */
  acc.classList.toggle("active");

  /* Toggle between hiding and showing the active panel */
  var panel = acc.nextElementSibling;
  if (panel.style.display === "block") {
    panel.style.display = "none";
  } else {
    panel.style.display = "block";
  }
}

// This is called when document is loaded, it toggles all accordions
function toggleAll() {
  var accs = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < accs.length; i++) {
    toggle(accs[i]);
  }
}

var accs = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < accs.length; i++) {
  accs[i].onclick = function() {
    toggle(this); // Use toggle function
  }
}
toggleAll();

＆＃13;

.accordion:after {
  content: "\002B";
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.accordion:hover {
  background-color: #333;
  color: white;
}

.active {
  background-color: #333;
  color: white;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 18px;
  background-color: white;
  display: none;
  transition: 0.2s ease-out;
}

.container {
  /* Floating the container will also float its content*/
  float: left;
}

</style>

＆＃13;

<!-- A wrapper around your accordions -->
<div class="container">
  <button class="accordion">New Attendees</button>
  <div class="panel">
    <p>How do I get started?</p>
    <p>I'm stuck! Where can I get help?</p>
  </div>
</div>

<div class="container">
  <button class="accordion">Instrument Simulations</button>
  <div class="panel">
    <p>What are some tools I can use?</p>
    <p>How can I obtain an estimate?</p>
  </div>
</div>

＆＃13;

我希望我能帮到你。

手风琴菜单：如何在开始时全部打开

2 个答案: