jquery hide隐藏了子菜单内容

时间：2014-03-19 21:07:14

标签： javascript jquery html css

我正在尝试拥有一个包含大量内容的html文档，一种在线manuel。我想通过向下滚动网页来查看所有内容。我还希望在网页上有一个菜单，其中包含一个部分列表的子菜单，用户可以单击该菜单以快速浏览网页。我目前看到一个问题是我的jquery代码隐藏在我的列表下面的所有内容，直到我将鼠标悬停在菜单上。 `

<!DOCTYPE html>
 <html>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple jQuery Dropdown Menu | Finished Article</title>

<style type="text/css">

/*style the main menu*/
.myMenu {
    margin:0;
    padding:0;
}

.myMenu li {
    list-style:none;
    float:left;
    font:12px Arial, Helvetica, sans-serif #111;
}

.myMenu li a:link, .myMenu li a:visited {
    display:block;
    text-decoration:none;
    background-color:#09F;
    padding: 0.5em 2em;
    margin:0;
    border-right: 1px solid #fff;
    color:#111;
}

.myMenu li a:hover {
    background-color:#0CF;  
}

/*style the sub menu*/
.myMenu li ul {
    position:absolute;
    visibility:hidden;
    border-top:1px solid #fff;
    margin:0;
    padding:10;
}

.myMenu li ul li {
    display:inline;
    float:none;
}

.myMenu li ul li a:link, .myMenu li ul li a:visited {
    background-color:#09F;
    width:200px;
}

.myMenu li ul li a:hover {
    background-color:#0CF;  
}

</style>

<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript">
$("#list,#list ul li,#list ul li a").hover(function(){
    $("#text").children().show();
});
$(document).ready(function() {
        $('.myMenu > li').bind('mouseover', openSubMenu);
        $('.myMenu > li').bind('mouseout', closeSubMenu);

        function openSubMenu() {
            $(this).find('ul').css('visibility', 'visible');
        };

        function closeSubMenu() {
            $(this).find('ul').css('visibility', 'hidden');         
        };

});
</script>

</head>
 <body>
 <h1>Pps1:Pps1.Generic.G5</h1>
 <p><a href='#ProcDesc'>ProcedureDescription</a></p>
 <ul class="myMenu">
    <li id="list"><a href="#ProcDesc">Procedure Descriptions</a>
        <ul>
            <li><a href='#Pps1BpTS.TSC'>Pps1BpTS.TSC</a></li>
            <li><a href='#Pps1ContCheck.TSC'>Pps1ContCheck.TSC</a></li>
            <li><a href='#Pps1ErrorText.TSC'>Pps1ErrorText.TSC</a></li>
            <li><a href='#Pps1Exit.TSC'>Pps1Exit.TSC</a></li>
            <li><a href='#Pps1ForceStandby.TSC'>Pps1ForceStandby.TSC</a></li>
            <li><a href='#Pps1Greet.TSC'>Pps1Greet.TSC</a></li>
            <li><a href='#Pps1HWGains.TSC'>Pps1HWGains.TSC</a></li>
            <li><a href='#Pps1Init.TSC'>Pps1Init.TSC</a></li>
            <li><a href='#Pps1LimitActionEStop.TSC'>Pps1LimitActionEStop.TSC</a></li>
        <ul>
    </li>
</ul>
 <h2>Module Description</h2>
 <p>AeroViroment Cycler Generic Module2.3.1, </p>
 <p></p>
 <p>Communication Type: CAN (MS) via CANNeo driver</p>
 <p>Supported Equipment: AV cyclers:AV900, ABC1000, ABC170, ABC150, and MT30</p>
 <p></p>
 <p>It is currently configured to handle Channel A or Channel B on the two channel Cyclers, this is controlled via numPps1Channel which can be set prior to boot up in the Pps1.ini file. This module was made to work as a Cycler Driver in a BcTS/BpTS application. </p>
 <p></p>
 <p>Revision History:</p>
 <p></p>
 <p>2009Jan5, csierra@aanddtech.com, Initial Release for POC testing2.3.2  </p>
 <p>2010Feb5, jdajos@aanddtech.com, fixed init error if test is stopped early and restarted from the beginning.  Pps1Stop.tsc, line 46 added2.3.2  </p>
 <p>2010Feb17, jhaigh@aanddtech.com, added a while loop to all limit action procedures to accommodate local fault log.  If you receive a buld error due to a missing channel flgsyscallout add it to the sys.fil2.3.2</p>
 <p>2010Mar23, daniel.h.vancleve@gm.com, Updated limit action procedures and default/running limits2.3.3</p>
 <p>2010Jun04, abilliau, added chamber safety procedure to all limit action.</p>
 <p>13Sept2010, JHaigh, Added flgPps1SPControl.  When set to 0 and the setpoint goes above or below the cycler high or low imits the iTest runs a sysstop.  When set to 1 and the setpoint goes above or below the high or low limits the setpoint is trimmed to match the limits.  When set to 2 and the setpoint exceeds the limits the setpoint is ignored</p>
 <p>20Sep2010 MBarker, Upped wait for CAN comm timer in Pps1Init to 50 seconds from 30 seconds (which wasnt enough for some cyclers, see Redmine issue #212)</p>
 <p>13March2014, WLowe, Add Pps1BpTS procedure to provide seamless integration into a BpTS Application.</p>

 <h2><a id='ProcDesc'> Procedure Descriptions</a></h2>

 </body>
 </html>
 <h3><a id='Pps1BpTS.TSC'>Pps1BpTS.TSC</h3>
 <blockquote>
 <h4>Procedure Description</h4>
 <p> This procedure is used as a shell to allow the AV module to support BcTS commands
 Pps1BpTS is called from Pps1Init procedure and will run in the background with a loop delay
 of valSysScanPeriod. The AV Modes are defined with the module channel numPps1ModeOut.
 0 = Voltage
 1 = Current
 2 = Power
 3 = Standby
</p>
 <h4>Argument Description</h4>
 <p> None</p>
 <h4>Return Description</h4>
 <p> None

</p>
 </blockquote>
 <h3><a id='Pps1ContCheck.TSC'>Pps1ContCheck.TSC</h3>
 <blockquote>
 <h4>Procedure Description</h4>
 <p> This procedure is used to make sure the AV Cycler has not entered into a fault
 mode. If it enters into a fault condition then flgPps1PackErr is set. I believe 
 flgPps1PackErr has active limits that will cause a fault condition that will shut down the cycler
</p>
 <h4>Argument Description</h4>
 <p> None</p>
 <h4>Return Description</h4>
 <p> None

</p>
 </blockquote>
 <h3><a id='Pps1ErrorText.TSC'>Pps1ErrorText.TSC</h3>
 <blockquote>
 <h4>Procedure Description</h4>
 <p> This procedure is called by Pps1ContCheck and is used to determine what the 
 current problem ID value means and set it to the Packet Error virtual string channel
</p>
 <h4>Argument Description</h4>
 <p> None</p>
 <h4>Return Description</h4>
 <p> None

如果您尝试运行此操作，您将看到菜单显示在顶部，但是只有将鼠标悬停在菜单上时，才会显示列表下方的信息。我究竟做错了什么？

2 个答案:

答案 0 :(得分：0)

Typo at line：

    <li><a href='#Pps1LimitActionEStop.TSC'>Pps1LimitActionEStop.TSC</a></li>
<ul>

它应该是</ul>（结束标记）

答案 1 :(得分：0)

看看这个：jsFiddle

您正在关闭<html> <body>代码，之后会有更多的HTML代码！

问题专栏：

<li id="list"><a href="#ProcDesc">Procedure Descriptions</a>
        <ul>
            <li><a href='#Pps1BpTS.TSC'>Pps1BpTS.TSC</a></li>
            <li><a href='#Pps1ContCheck.TSC'>Pps1ContCheck.TSC</a></li>
            <li><a href='#Pps1ErrorText.TSC'>Pps1ErrorText.TSC</a></li>
            <li><a href='#Pps1Exit.TSC'>Pps1Exit.TSC</a></li>
            <li><a href='#Pps1ForceStandby.TSC'>Pps1ForceStandby.TSC</a></li>
            <li><a href='#Pps1Greet.TSC'>Pps1Greet.TSC</a></li>
            <li><a href='#Pps1HWGains.TSC'>Pps1HWGains.TSC</a></li>
            <li><a href='#Pps1Init.TSC'>Pps1Init.TSC</a></li>
            <li><a href='#Pps1LimitActionEStop.TSC'>Pps1LimitActionEStop.TSC</a></li>
        <ul>
    </li>

您的ul未正确关闭。

<h2><a id='ProcDesc'> Procedure Descriptions</a></h2>

 </body>
 </html>
 <h3><a id='Pps1BpTS.TSC'>Pps1BpTS.TSC</h3>

关闭了body和html标签，然后是更多的html。

相关问题
最新问题