Question

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

Answer 1

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

ul ul{
    display:none;
}

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

jsFiddle here

以下是显示内部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 here

'li'在悬停显示下一个'ul'

1 个答案: