Question

我在我的html页面中使用了jquery“slideToggle”功能，只要在我的网页上单击名为“Planning”的标题，就会下拉子列表。虽然这在Adobe 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>

Answer 1

我不知道我是否理解你的问题。你没有将href属性设置为菜单“Planing”（不确定它是否有用）。如果您希望这样做只是打开并关闭面板（不需要链接），那么对代码的更改应该有所帮助。

   $(document).ready(function(){
      $("#planning").click(function(e){
        $("#planning_panel").slideToggle("fast");
          e.preventDefault(); // prevent default behaviour
      });
    });

Jquery“slideToggle（）”函数在Adobe Dreamweaver中正常工作，但在浏览器上不起作用

1 个答案: