1

我正在尝试做一个小脚本，当鼠标悬停在 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/ 正如你所看到的，我所做的非常愚蠢。做这个的最好方式是什么？请问有什么建议吗？

4

1 回答 1

3

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

ul ul{
    display:none;
}

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

jsFiddle在这里

这是显示内部 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;
}

jsFiddle在这里

于 2013-10-14T04:23:29.963 回答