Question

正如你从问题中看到的那样，我对jQuery和这种类型的编码并不是很好我正在构建一个megamenu，其中一个菜单项应该显示如下图所示的div：https://pasteboard.co/H2zzoDs.jpg
正如你在我的小提琴https://codepen.io/byte37/pen/YYLmNq中看到的那样，我无法显示悬停在其上的li元素的相应Div。

我想要实现的是当我将一个列表元素（li）悬停时，我想显示相应的Div。

<div class="cbi-main-menu">
    <div class="row">
        <div class="col-md-3">
            <div class="cbi-menu-sidebar">
              <h3 class="menu-item-prime">Menu</h3>
        <ul id="menu-left" class="no-style">
          <li><a id="lnk1" href="#" class="menu-item-1" >Link 1</a></li>
              <li><a id="lnk2" href="#" class="menu-item-2">Link 2</a></li>
              <li><a id="lnk3" href="#" class="menu-item-3">Link 3</a></li>
          <li><a id="lnk4" href="#" class="menu-item-4">Link 4</a></li>
          <li><a id="lnk5" href="#" class="menu-item-5">Link 5</a></li>
          <li><a id="lnk6" href="#" class="menu-item-6">Link 6</a></li>
          <li><a id="lnk7" href="#" class="menu-item-7">Link 7</a></li>
          <li><a id="lnk8" href="#" class="menu-item-8">Link 8</a></li>
          <li><a id="lnk9" href="#" class="menu-item-9">Link 9</a></li>
          <li><a id="lnk10" href="#" class="menu-item-10">Link 10</a></li>
          </ul>
            </div>
        </div>
        <div class="col-md-9">
            <div class="link-show container-menu" id="item-1"><img src="http://via.placeholder.com/350x150" id="item-1">Link1</div>
            <div class="link-show container-menu"><img src="http://via.placeholder.com/350x150" id="item-2">Link2</div>
            <div class="link-show container-menu"><img src="http://via.placeholder.com/350x150" id="item-3">Link3</div>
      <div class="link-show container-menu"><img src="http://via.placeholder.com/350x150" id="item-4">Link4</div>
            <div class="link-show container-menu"><img src="http://via.placeholder.com/350x150" id="item-5">Link5</div>
            <div class="link-show container-menu"><img src="http://via.placeholder.com/350x150" id="item-6">Link6</div>
      <div class="link-show container-menu"><img src="http://via.placeholder.com/350x150" id="item-7">Link7</div>
            <div class="link-show container-menu"><img src="http://via.placeholder.com/350x150" id="item-8">Link8</div>
            <div class="link-show container-menu"><img src="http://via.placeholder.com/350x150" id="item-9">Link9</div>
      <div class="link-show container-menu"><img src="http://via.placeholder.com/350x150" id="item-10">Link10</div>
        </div>
    </div>
</div>

JS：

$('#menu-left li').hover(
        function() {
             $(this).closest('.container-menu').find('.link-show').show();
        },
        function() {
              $(this).closest('.container-menu').find('.link-show').hide();
    });

额外的问题：由于div的内容我想显示/隐藏，主要是由图片制作，有没有办法只在悬停在＆lt; li>元件？只有当鼠标悬停在＆lt;时，才能加载所有内容并显示内容。 li＆gt;＆＃39; s 谢谢！

Answer 1

您可以为每个li元素添加一个数据菜单，其中包含您要显示的菜单的ID，如下所示：

＆＃13;

<li data-menu="item-1"><a id="lnk1" href="#" class="menu-item-1" >Link 1</a></li>

＆＃13;

然后你应该为你想要展示的div添加一个id属性，就像你已经为第一个做的那样：

＆＃13;

<div class="link-show container-menu" id="item-1">
    <img src="http://via.placeholder.com/350x150" id="item-1">Link1
</div>

＆＃13;

以这种方式链接这两个项目，您可以使用一个简单的处理程序来悬停li元素，例如：

＆＃13;

$('#menu-left li').hover(
  function() {
    $("#" + $(this).data("menu")).show();
  },
  function() {
    $("#" + $(this).data("menu")).hide();
  }
);

＆＃13;

列表项用jQuery显示/隐藏不同的和单独的div

1 个答案: