Question

我使用库CSI.js从其他HTML页面进行索引调用

我的索引：

<div class="col-6 col-md-2" id="nav">
  <div data-include="./views/menu/sticky-menu.html"></div> <!-- menu -->
</div>

在菜单页面：

<div class="sticky-menu" id="sticky-menu">
  <div class="sticky-menu-header">
    <img class="logo" src="./img/logo-branco.svg" />
  </div>
  <ul>
    <li class="active"><a href="#"><i class="fa fa-home"></i>Home </a></li>
    <li><a href="#"><i class="fa fa-glass"></i>Eventos </a></li>
    <li><a href="#"><i class="fa fa-file-image-o"></i>Alertas </a><span class="sticky-menu-label">4 </span></li>
    <li><a href="#"><i class="fa fa-cog"></i>Indicadores </a>
      <ul class="submenu">
        <li><a href="#">Teste</a></li>
        <li><a href="#">Teste </a></li>
        <li>
          <a href="#">Teste </a>
            <ul class="submenu">
              <li><a href="#">Teste </a></li>
            </ul>
        </li>
        <li><a href="#">Consulting </a></li>
      </ul>
    </li>
    <li>
      <a href="#"><i class="fa fa-suitcase"></i>Grafana </a>
      <ul class="submenu">
        <li><a href="#">Item 0 </a></li>
        <li><a href="#">Item 1 </a><span class="sticky-menu-label">10 </span></li>
      </ul>
    </li>
  </ul>
</div>

子菜单具有带有jquery的下拉动画：

jQuery(document).ready(function() {
  jQuery("#sticky-menu").jqueryAccordionMenu();
});

在菜单页面（sticky-menu.html）上，它可以正常运行，如下所示：

https://i.stack.imgur.com/oAPds.png

请注意，单击时会显示+符号：

https://i.stack.imgur.com/9OJIu.png

但是，不是index.html，菜单（jquery）无效：

https://i.stack.imgur.com/tvBRR.png

当我在控制台中输入代码时：

jQuery(document).ready(function() {
  jQuery("#sticky-menu").jqueryAccordionMenu();
});

有效：https://i.stack.imgur.com/YZe8y.png

我在两个页面上都包含了js代码，我认为这很愚蠢，但我确实不能。谢谢您的帮助。

编辑： 我注意到我的sticky-menu.html在脚本之后穿了。该怎么解决？

https://i.stack.imgur.com/j1Pzu.png

Answer 1

您可以运行以下代码

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>


    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.21.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>


    <groupId>com.myapp</groupId>
    <artifactId>MyApp</artifactId>
    <version>1.0.0</version>
    <name>${project.artifactId}</name>
    <description>My Application</description>

    <packaging>war</packaging>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
        <maven.test.skip>true</maven.test.skip>
        <tomcat.version>7.0.78</tomcat.version>
        <servlet-api.version>3.0.1</servlet-api.version>
        <thymeleaf.version>3.0.3.RELEASE</thymeleaf.version>
        <thymeleaf-layout-dialect.version>2.2.1</thymeleaf-layout-dialect.version>
    </properties>

    <dependencies>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>

            <exclusions>
                <exclusion>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-logging</artifactId>
                </exclusion>
            </exclusions>

        </dependency>

        <dependency>
            <groupId>org.springframework.session</groupId>
            <artifactId>spring-session</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-tomcat</artifactId>
           <scope>provided</scope>
        </dependency>

         <dependency>
            <groupId>test</groupId>
            <artifactId>x</artifactId>
            <version>1.0</version>
            <scope>system</scope>
            <systemPath>${basedir}/MyJar.jar</systemPath>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>org.thymeleaf.extras</groupId>
            <artifactId>thymeleaf-extras-springsecurity5</artifactId>
            <version>3.0.4.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>nz.net.ultraq.thymeleaf</groupId>
            <artifactId>thymeleaf-layout-dialect</artifactId>
            <version>2.3.0</version>
        </dependency>

    </dependencies>

    <build>
        <finalName>${project.artifactId}</finalName>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

其中元素的function waitForElement(id, callback){ var checkForElement = setInterval(function(){ if(document.getElementById(id)){ clearInterval(checkForElement); callback(); } }, 100); } waitForElement("idOfElementToWaitFor", function(){ alert("element is loaded.. do stuff"); });为id，而回调函数为#sticky-menu

jQuery无法识别菜单包括

1 个答案: