javascript - 变量 div id 上的 JQuery .css()

Question

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

当用户将鼠标移动到菜单上时，会显示各种 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上升？ 考虑到我上面描述的可能性，这并不不幸。

Answer 1

您遇到以下问题:

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

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

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

试试这个方法:

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");
    });
});

<强> Fiddle

作为一种快捷方式，您甚至可以使用 .toggle() 来使用单行

$(document).ready(function() {
    $(".menue li").hover(function(){
          $(".subMenue" +  $(this).data('target')).toggle();
    });
});