Question

请参阅下面的页面标题...

当我打电话

    jkmegamenu.definemenu("megaanchor0", "megamenu0", "mouseover");
    jkmegamenu.definemenu("megaanchor2", "megamenu2", "mouseover");
    jkmegamenu.definemenu("megaanchor3", "megamenu3", "mouseover");
    jkmegamenu.definemenu("megaanchor4", "megamenu4", "mouseover");

到没有准备好doc的页面，mega menues工作正常。当我将调用放入doc ready函数时，menues不会加载。

有什么想法吗？（见http://pushpinevents.com/alarm/index.php）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Alarm of America</title>


<script  type="text/javascript" src="java/jquery-1.10.1.min.js"></script>

<script  type="text/javascript" src="java/jkmegamenu.js"></script>

<script  type="text/javascript">
$(document).ready(function() {

    jkmegamenu.definemenu("megaanchor0", "megamenu0", "mouseover");
    jkmegamenu.definemenu("megaanchor2", "megamenu2", "mouseover");
    jkmegamenu.definemenu("megaanchor3", "megamenu3", "mouseover");
    jkmegamenu.definemenu("megaanchor4", "megamenu4", "mouseover");

    });
</script>




<script  type="text/javascript" src="java/slides.js"></script>


<script  type="text/javascript" src="curvycorners.src.js"></script>





<script type="text/javascript">
$('#mainbanner').ready(function() {
      $("#slides").slidesjs({
        width: 842,
        height: 325,
    play: {
      active: false,
        // [boolean] Generate the play and stop buttons.
        // You cannot use your own buttons. Sorry.
      effect: "fade",
        // [string] Can be either "slide" or "fade".
      interval: 2000,
        // [number] Time spent on each slide in milliseconds.
      auto: true,
        // [boolean] Start playing the slideshow on load.

      pauseOnHover: true,
        // [boolean] pause a playing slideshow on hover
      restartDelay: 2500,
        // [number] restart delay on inactive slideshow

    },

    navigation: false



      });
    });
  </script>

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

</head>

和html ......

  <li><a href="#" id='megaanchor0'>Residential</a></li>

        <span id="megamenu0" class="megamenu">
         <div class="column">

        <ul>

        <li><a href='#'>Home Security with Fire Protection</a></li>
        <li><a href='#'>Video Surveillance</a></li>
        <li><a href='#'>Phone, Cable, Office and Satellite Wiring &amp; Trim</a></li>
        <li><a href='#'>TV Purchase &amp; Installation</a></li>
        <li><a href='#'>No Phone Required Systems</a></li>
        <li><a href='#'>Look-in Video Systems</a></li>


        </ul>
        </div>


        <div class="column">

        <ul>

        <li><a href='#'>Remote Access to Securty System</a></li>
        <li><a href='#'>Computer and Smart Phone Apps</a></li>
        <li><a href='#'>Blue Alert Home Healthcare System</a></li>
        <li><a href='#'>Security Screens</a></li>
        <li><a href='#'>Cell Back-up Systems using Tellular or Uplink</a></li>
        <li><a href='#'>SAFEGUARD Inspection Service</a></li>


        </ul>
        </div>



        </span>

Answer 1

我会在页面末尾进行一次document.ready()调用，如下所示：

<script  type="text/javascript">
  $(document).ready(function() {

    jkmegamenu.definemenu("megaanchor0", "megamenu0", "mouseover");
    jkmegamenu.definemenu("megaanchor2", "megamenu2", "mouseover");
    jkmegamenu.definemenu("megaanchor3", "megamenu3", "mouseover");
    jkmegamenu.definemenu("megaanchor4", "megamenu4", "mouseover");

    $("#slides").slidesjs({
        width: 842,
        height: 325,
        play: {
          active: false,
          // [boolean] Generate the play and stop buttons.
          // You cannot use your own buttons. Sorry.
          effect: "fade",
          // [string] Can be either "slide" or "fade".
          interval: 2000,
          //[number] Time spent on each slide in milliseconds.
          auto: true,
          //[boolean] Start playing the slideshow on load.

          pauseOnHover: true,
          // [boolean] pause a playing slideshow on hover
          restartDelay: 2500,
          // [number] restart delay on inactive slideshow
        }, 
       navigation: false
   });
  });
</script>

使用当前代码，您将在document.ready()上定义菜单，以便在加载所有html并添加到DOM后添加它们。但是，只要在#mainbanner之前加载document.ready()，就会调用slideJS，这就是为什么将它们置于同一个调用中并按照正确的顺序解决问题。

Answer 2

原来我在样式之前加载了javascript。我现在交换了那些和一切的桃子：D。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Alarm of America</title>

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


<script  type="text/javascript" src="java/jquery-1.10.1.min.js"></script>

<script  type="text/javascript" src="java/jkmegamenu.js"></script>

<script  type="text/javascript">
$(document).ready(function() {

    jkmegamenu.definemenu("megaanchor0", "megamenu0", "mouseover");
    jkmegamenu.definemenu("megaanchor2", "megamenu2", "mouseover");
    jkmegamenu.definemenu("megaanchor3", "megamenu3", "mouseover");
    jkmegamenu.definemenu("megaanchor4", "megamenu4", "mouseover");

    });
</script>




<script  type="text/javascript" src="java/slides.js"></script>


<script  type="text/javascript" src="curvycorners.src.js"></script>





<script type="text/javascript">
$('#mainbanner').ready(function() {
      $("#slides").slidesjs({
        width: 842,
        height: 325,
    play: {
      active: false,
        // [boolean] Generate the play and stop buttons.
        // You cannot use your own buttons. Sorry.
      effect: "fade",
        // [string] Can be either "slide" or "fade".
      interval: 2000,
        // [number] Time spent on each slide in milliseconds.
      auto: true,
        // [boolean] Start playing the slideshow on load.

      pauseOnHover: true,
        // [boolean] pause a playing slideshow on hover
      restartDelay: 2500,
        // [number] restart delay on inactive slideshow

    },

    navigation: false



      });
    });
  </script>


</head>

我如何正确使用（文件）.ready？

2 个答案: