2

我只是要建立一个漂亮的悬停菜单。

当用户将鼠标移到菜单上时，会显示各种 div。

这是我的 HTML 代码：

<ul class="menue">
  <li><a href="#">Startseite</a></li>
  <li id="1"><a href="#">Menü1</a></li>
  <li id="2"><a href="#">Menü2</a></li>
</ul>
<div class="subMenue" id="2">Test-Menue1</div>
<div class="subMenue" id="2">Test-Menue2</div>

这是JS：

$(document).ready(function() {
    $(".menue li").mouseover(function(){
        if($(this).attr('id')){
            $(".subMenue #" + $(this).attr('id')).css("display", "block");
        }
    }).mouseout(function(){
        $(".subMenue #" + $(this).attr('id')).css("display", "none");
    });
});

我现在怎么能得到如果我越过<li>id 1<div>的 id 1 上升？有了上面描述的我的可能性，这并不不幸。

4

3 回答 3

2

您有以下问题：

  • 使用了重复的 ID。除了无效的 html 之外，您的选择器最终会遇到问题。

  • 选择器不正确.subMenue #1应该是.subMenue#1。

您可以使用data-targetli 上的自定义属性来提供目标的选择器（以避免任何字符串连接来计算目标的 id 和任何类型的选择器具有任何嵌套的灵活性）而不是 ids，只需$(".subMenue" + $(this).data('target'))选择相应的元素。这是一种类似于引导程序的模式框架。

试试这个方法：

html

<ul class="menue">
  <li><a href="#">Startseite</a></li>
  <li data-target="#1"><a href="#">Menü1</a></li>
  <li data-target="#2"><a href="#">Menü2</a></li>
</ul>
<div class="subMenue" id="1">Test-Menue1</div>
<div class="subMenue" id="2">Test-Menue2</div>

脚本

$(document).ready(function() {
    $(".menue li").mouseover(function(){
          $(".subMenue" +  $(this).data('target')).css("display", "block");
    }).mouseout(function(){
         $(".subMenue" + $(this).data('target')).css("display", "none");
    });
});

小提琴

作为一种快捷方式，您甚至可以使用一个衬垫使用.toggle()

$(document).ready(function() {
    $(".menue li").hover(function(){
          $(".subMenue" +  $(this).data('target')).toggle();
    });
});
于 2013-07-02T18:27:31.750 回答
0

html

<ul class="menue">
  <li><a href="#">Startseite</a></li>
  <li class="menu" data-id="sub1"><a href="#">Menü1</a></li>
  <li class="menu" data-id="sub2"><a href="#">Menü2</a></li>
</ul>
<div class="subMenue" id="sub1">Test-Menue1</div>
<div class="subMenue" id="sub2">Test-Menue2</div>

js

$(document).ready(function() {
$('.menue > li.menu').mouseenter(function(){
    $('#' + $(this).data('id')).css('display', 'block');

}).mouseleave(function(){
    $('#' + $(this).data('id')).css('display', 'none');
});

});

于 2013-07-02T18:34:18.730 回答
0

如果您在任何地方都没有 URL 点，我建议您稍微更改一下结构。

<ul class="menue">
  <li><a href="#">Startseite</a></li>
  <li><a href="#submenu-1">Menü1</a></li>
  <li><a href="#submenu-2">Menü2</a></li>
</ul>
<div class="subMenue initial" id="submenu-1"><a name="submenu-1"></a>Test-Menue1</div>
<div class="subMenue" id="submenu-2"><a name="submenu-2"></a>Test-Menue2</div>

添加更多功能可能很有用，例如使用 Javascript 隐藏您的元素，以防有人在未启用 Javascript 的情况下尝试访问，然后链接将指向命名的锚点。

$(document).ready(function() {
  $(".subMenue").not(".initial").css("display", "none");//hide all but the initial div
  $(".menue li").hover(function(){
    $("#"+$(this).attr("href")).css("display", "block");
  },
  function(){
    $("#"+$(this).attr("href")).css("display", "none");
  });

});

于 2013-07-02T18:46:22.533 回答