0

我在我的 html 页面中使用了一个 jquery“slideToggle”函数，只要我在我的网页上单击一个名为“Planning”的标题，它就会下拉一个子列表。虽然这在 Adob​​e Dreamweaver 设计模式下完全符合我的要求，但在浏览器中打开时不起作用。这是我的完整代码：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script src="jquery-1.8.3.min.js">
    </script>
    <script> 
    $(document).ready(function(){
      $("#planning").click(function(){
        $("#planning_panel").slideToggle("fast");
      });
    });
    </script>
    <title>Ecommerce Information</title>
    <style type="text/css">
    <!--
    a:link {color:#03F; text-decoration:none; text-emphasis:none;         font-size:12px}            /* unvisited link */
    a:visited {color:#03F; text-decoration:none} /* visited link */
    a:hover {color:#F30; text-decoration:none; font-size:14px}   /* mouse over link */

    .style2 {font-size: 13px;
        font-family:"Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;

    }
    .style4 {
        font-size: 18px;
        font-weight: bold;
        color: #FF6600;
    }
    .style6 {color: #000000}
    .style7 {font-size: 8px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
    }
    .style23 {font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
    }
    .style45 {
         background-color:#E8E8E8;
    }
    .style44 {
        background-image:url('gray_jean.jpg');
    }
    #planning_panel
    {

    display:none;
    }
    -->
    </style>
    </head>

    <body>
    <div align="center">
      <a href="../index.html">
      <img border="0" src="banner1.jpg" width="800" height="120" alt="Ecommerce Knowledge Base"></a>
      <div style="background-image:url(Heading%20Background.jpg); width:800px">
      <a href="../index.html" style="position:relative; left:-130px">HOME</a>
      <a href="" style="position:relative; left:-65px" id="planning">PLANNING</a>
      <a href="" style="position:relative; left:0px" id="design">DESIGN & HOSTING</a>
      <a href="" style="position:relative; left:65px" id="marketing">MARKETING</a>
      <a href="" style="position:relative; left:130px" id="technology">TECHNOLOGY</a>
      </div>
      <table width="800" border="0" cellspacing="0" cellpadding="5" class="style44">
      <tr><td><div id="planning_panel" style="position:absolute; left:295px;top:150px; background-color:#999; padding:5px;">
       <a href="../Planning/what-is-electronic-data-interchange.html">Electronic-Data-        Interchange</a><br>
       <a href="../Planning/web-site-analysis----a-study-in-damag.html">Web Site Analysis</a><br>
       <a href="../Planning/web-ecommerce--where-to-begin.html">Web Ecommerce</a><br>
       <a href="../Planning/streamline-your-website-pages.html">Streamline Web Pages</a><br>
       <a href="../Planning/set-up-your-own-blog-free.html">Setting Up Blog</a><br>
       <a href="../Planning/online-backup--the-simple-value.html">Online Backup</a><br>
       <a href="../Planning/introduction-to-ecommerce.html">Introduction To Ecommerce</a><br>
       <a href="../Planning/building-ecommerce-web-sites--where-d.html">Build eCommerce Sites</a><br>
       <a href="../Planning/banned-by-google-and-back-again..html">Banned by Google</a><br>
       <a href="../Planning/are-drop-ship-directories-really-wort.html">Know Drop Ship Directories</a><br>
       </div></td></tr>
        <tr>
          <td>

            <div align="center">   
          &nbsp;</div></td>
        </tr>
        <tr>
          <td width="514" valign="top"><div align="left">
              <table width="99%" height="114">
                <tr>
                  <td align="left" height="22"><div align="justify"><span class="style7">
                    <font color="navy" size="1" face="Tahoma"><h1 align="center">5 Minute Guide to Video Editing for Beginners</h1><br>
                      </font></span></div></td>
                </tr>
                <tr >
                  <td align="left" height="12"><span class="style2"><span>My text</span><hr size=-1>
      <br>
      </span></td>
                </tr>
                </table>
            </div>        <p align="left">&nbsp;        </p>
          </td>
        </tr>
      </table>

      </div>
    </body>
    </html>
4

1 回答 1

1

I do not know if I understand your question correctly. you dont have an href attribute set to the menu "Planing" (not sure if it is on purpose). If you wish to do is just open and close the panel (without going to a link) then this change to your code should help.

   $(document).ready(function(){
      $("#planning").click(function(e){
        $("#planning_panel").slideToggle("fast");
          e.preventDefault(); // prevent default behaviour
      });
    });​
于 2012-12-29T22:15:51.517 回答