悬停显示下一个“ul”的“李”

'li' on hover show next 'ul'

本文关键字：显示 ul 悬停 下一个      更新时间：2023-09-26

我正在尝试做一个小脚本，当鼠标在li链接上时，它将显示下一个ul。

这是 html：

<ul class="submenu_ul">
    <li>
       <a style="font-weight:bold;" href="index.php?seite=27&amp;parent=25">Klassen 2012/13</a><div style="clear:both;"></div>
    </li>
<ul>
</ul>
    <li>
       <a style="font-weight:bold;" href="index.php?seite=28&amp;parent=25">Events 2012/2013 </a><div style="clear:both;"></div>
    </li>
<ul>
</ul>
    <li>
       <a style="font-weight:bold;" href="index.php?seite=29&amp;parent=25">Events 2013/2014</a><div style="clear:both;"></div>
    </li>
<ul>
    <li style="margin-left:30px;">
       <a href="index.php?seite=427&amp;parent=25">test1</a>
    </li><li style="margin-left:30px;">
       <a href="index.php?seite=428&amp;parent=25">test2</a>
    </li></ul><li>
       <a style="font-weight:bold;" href="index.php?seite=36&amp;parent=25">Klassen 2013/14</a><div style="clear:both;"></div>
    </li>
<ul>
    <li style="margin-left:30px;">
       <a href="index.php?seite=410&amp;parent=25">1. Klassen</a>
    </li><li style="margin-left:30px;">
       <a href="index.php?seite=422&amp;parent=25">2. Klassen</a>
    </li><li style="margin-left:30px;">
       <a href="index.php?seite=423&amp;parent=25">3. Klassen</a>
    </li>
</ul>
</ul>

这是 jquery 脚本： 

$( ".submenu_ul li" ).hover(
  function() {
    $( this ).next('ul').removeClass( "hover" );
  }, function() {
    $( this ).next('ul').addClass( "hover" );
  }
);

这是JSFIDDLE：http://jsfiddle.net/CDMSK/2/正如你所看到的，我所做的是非常菜鸟。最好的方法是什么？有什么建议吗？

您可以使用CSS显示下一个ul：

ul ul{
    display:none;
}
ul li:hover + ul{
    display:block;
}

js小提琴在这里

这是显示内部 ul 的更新：

.HTML：

<ul class="submenu_ul">
    <li>    <a style="font-weight:bold;" href="index.php?seite=27&amp;parent=25">Klassen 2012/13</a>
        <div style="clear:both;"></div>
    <ul></ul>
    </li>
    <li>    <a style="font-weight:bold;" href="index.php?seite=28&amp;parent=25">Events 2012/2013 </a>
        <div style="clear:both;"></div>
    <ul></ul>
    </li>
    <li>    <a style="font-weight:bold;" href="index.php?seite=29&amp;parent=25">Events 2013/2014</a>
        <div style="clear:both;"></div>
    <ul>
        <li style="margin-left:30px;">  <a href="index.php?seite=427&amp;parent=25">test1</a>
        </li>
        <li style="margin-left:30px;">  <a href="index.php?seite=428&amp;parent=25">test2</a>
        </li>
    </ul>
    </li>
    <li>    <a style="font-weight:bold;" href="index.php?seite=36&amp;parent=25">Klassen 2013/14</a>
        <div style="clear:both;"></div>
    <ul>
        <li style="margin-left:30px;">  <a href="index.php?seite=410&amp;parent=25">1. Klassen</a>
        </li>
        <li style="margin-left:30px;">  <a href="index.php?seite=422&amp;parent=25">2. Klassen</a>
        </li>
        <li style="margin-left:30px;">  <a href="index.php?seite=423&amp;parent=25">3. Klassen</a>
        </li>
    </ul>
    </li>
</ul>

.CSS：

ul ul{
    display:none;
}
ul li:hover ul{
    display:block;
}

js小提琴在这里

相关文章：