List items show / hide different and separate div with jQuery

眉间皱痕 提交于 2019-12-13 03:56:23

问题



as you can see from the question i'm not very good with jQuery and this type of coding.
I'm building a megamenu and one of the menu items should show a div like this picture: https://pasteboard.co/H2zzoDs.jpg
As you can see in my fiddle https://codepen.io/byte37/pen/YYLmNq , i'm not able to show the corresponding Div of the li element i'm hovering on.
What i'm trying to achieve is that when I hover one of the list elements (li) i want to show the the corresponding 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();
    });  

Extra question: since the content of the div i want show / hide, is mainly made by pictures, is there a way to load the content only when hovering on < li > element? Instead of loading everything and showing the contents only when hovering over the < li >'s?
Thanks!


回答1:


You can add a data-menu for each li element which contains the id of the menu you want to show, something like this:

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

Then you should add an id attribute to the div you want to show, like you already did for the first one:

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

Linking the two items this way, you can have a simple handler for hovering the li element, like:

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


来源:https://stackoverflow.com/questions/48225368/list-items-show-hide-different-and-separate-div-with-jquery

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!