Question

我有一个项目，其中导航菜单应该打开另一个菜单，我希望第二个菜单加载Ajax。我得到的问题是，一旦菜单加载了Ajax，css就没有正确应用。为了使这个非常明显，我已经为菜单复制了完全相同的代码，我已经将代码放在主文件中，并且在加载的文件中放入相同的代码，以便您可以看到菜单移动，并且还松散它：悬停规则。这是一个gif：

如您所见，菜单会移动，并且不会应用悬停的不同样式。

这是代码。

<!DOCTYPE html>
<html lang="en-US">

  <head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="styles.css">

  </head>

  <body>


      <?php include('main.php'); ?>




    <script type="text/javascript" src="JavaScript/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="JavaScript/noIntro.js"></script>
    <script type="text/javascript" src="JavaScript/general.js"></script>

  </body>

main.php

<?php include 'db_connect.php'; ?>
<?php include 'header.php'; ?>

<div id="subheader" class="notVisible">

  <nav id="menu2">
    <ul>
       <li><a href="request4guitars.php" class="firstlevel">ACOUSTIQUES</a><span class="dot">•</span>
       </li>
       <li><a href="#.html" class="firstlevel">ARCHTOPS</a><span class="dot">•</span></li>
       <li><a href="#.html" class="firstlevel">SIGNATURES</a><span class="dot">•</span></li>
       <li><a href="#.html" class="firstlevel">COLLECTIONS</a></li>
     </ul>
  </nav>

</div>

<ul id="guitarWindow">

  <?php



    $inner = mysqli_query($connect,"SELECT * FROM models WHERE cat_id = 1");

    while ($i = mysqli_fetch_array($inner)) {

      if ($i['id'] == 1){

      echo '<li><a href="#" class="selected">'.$i['name'].'<span>'.$i['cases'].' cases</span></a></li>';}

      else {

      echo '<li><a href="#">'.$i['name'].'<span>'.$i['cases'].' cases</span></a></li>';}

    }
   ?>
</ul>

＆＃34; guitarWindow＆＃34;内的php标签ul是加载第一个菜单的东西。

这是加载的ajax内容，代码相同：

request4guitars.php

<ul id="guitarWindow">
  <?php include 'db_connect.php'; ?>
  <?php



    $inner = mysqli_query($connect,"SELECT * FROM models WHERE cat_id = 1");

    while ($i = mysqli_fetch_array($inner)) {

      if ($i['id'] == 1){

      echo '<li><a href="#" class="selected">'.$i['name'].'<span>'.$i['cases'].' cases</span></a></li>';}

      else {

      echo '<li><a href="#">'.$i['name'].'<span>'.$i['cases'].' cases</span></a></li>';}

    }
   ?>

</ul>

最后使用ajax加载内容的js：

$( document ).on('click', 'nav#menu2 a', function(e){
  e.preventDefault();

  var url = this.href;
    $( "nav#menu2 a.currentSubheader" ).removeClass("currentSubheader");
    $(this).addClass("currentSubheader");
      $( '#guitarWindow').load('../request4guitars.php' + ' #guitarWindow', function(){

    });

});

我不包括css，因为css开始工作。我还在学习php和ajax，所以这可能是一个非常简单的错误。谢谢。

EDIT ---------------------------------------------- ------------------------------------

经过一番调查后，缺少悬停样式与另一个不可见的元素有关，并且在第二个菜单的顶部。所以这里唯一的问题是菜单在加载ajax后会改变位置。

加载了ajax的内容没有正确应用css

0 个答案: