jQuery 菜单下拉气泡

Question

所以我有这个菜单需要在任何项目悬停时显示一个框。该框是一个包含标题文本和图像的 div，这是我的代码。我正在尝试编写一个函数，该函数将在项目悬停时切换不同的框。

例如，将鼠标悬停在“按钮 1”上应该切换“#tab1”，将鼠标悬停在“按钮 3”上会切换“#tab3”。

类下拉内容有display: none隐藏所有的div。

感谢您的帮助！

$('#secondary-menu li').hover(function(){ 
  var arr= ['1','2','3','4','5'];
  $.each($(this),function(index,value){
    //I don't know what to insert here
    $('#tab'+ [arr]).toggle();
  });
});

$('#secondary-menu li').onmouseout(function(){
  $('#tab' + [arr]).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>
  <code>
    <div id="secondary-menu">
      <ul>
        <li>button 1</li>
        <li>button 2</li>
        <li>button 3</li>
        <li>button 4</li>
        <li>button 5</li>
      </ul>
    </div>

    <div id="tab1" class='dropdown-content'>
      <h5>Some Heading</h5>
      <img src="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
    </div>

    <div id="tab2" class='dropdown-content'>
      <h5>Heading Two</h5>
      <img src="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
    </div>
  
    <div id="tab3" class='dropdown-content'>
      <h5>Heading Three</h5>
      <img src="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
    </div>

    <div id="tab4" class='dropdown-content'>
      <h5>Heading Four</h5>
      <img src="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
    </div>

    <div id="tab5" class='dropdown-content'>
      <h5>Heading Five</h5>
      <img src="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
    </div>
  </code>
</pre>

Answer 1

只需稍微重构您的代码并使用显示/隐藏鼠标悬停。还使用 data 属性将 li 按钮链接到正确的 div 框。

// ***********
// One way is to get count for all classes with the dropdown-content and loop through appending the data attribute.
// ***********
function AddMe(){

  var i = 1; // counter
  
  // loop through each .dropdown-content class and append
  // a li with incremented data-id
  $(".dropdown-content").each(function(){
    
    // content is here
    $("#secondary-menu ul").append("<li data-id='"+i+"'> button "+i+"</li>");
    
    i++; // increment the counter
    
  });
}

// ***********
//start function
// ***********
AddMe();

// ***********
//Events
// ***********
$('#secondary-menu li').on("mouseover", function() {
  var id = $(this).attr("data-id");
  $("#tab" + id).show();
});

$('#secondary-menu li').on("mouseout", function() {
  var id = $(this).attr("data-id");
  $("#tab" + id).hide();
});

.dropdown-content {
  display: none;
}

li:hover {
  cursor: pointer;
  background: skyblue;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="secondary-menu">
  <ul>
  <!--
    <li data-id="1">button 1</li>
    <li data-id="2">button 2</li>
    <li data-id="3">button 3</li>
    <li data-id="4">button 4</li>
    <li data-id="5">button 5</li>
    -->
  </ul>
</div>

<div id="content">

  <div id="tab1" class='dropdown-content'>
    <h5>Some Heading</h5>
    <img src="">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
  </div>

  <div id="tab2" class='dropdown-content'>
    <h5>Heading Two</h5>
    <img src="">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
  </div>

  <div id="tab3" class='dropdown-content'>
    <h5>Heading Three</h5>
    <img src="">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
  </div>



  <div id="tab4" class='dropdown-content'>
    <h5>Heading Four</h5>
    <img src="">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
  </div>



  <div id="tab5" class='dropdown-content'>
    <h5>Heading Five</h5>
    <img src="">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
  </div>
</div><!-- CONTENT END -->

Answer 2

这里有一个解决方案https://jsfiddle.net/vh7rajh6/

$('#secondary-menu li').mouseenter(function(){ 
  $('#' + $(this).data('tab')).slideDown();
}).mouseleave(function(){
  $('#' + $(this).data('tab')).slideUp();
});

.dropdown-content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="secondary-menu">
  <ul>
    <li data-tab="tab1">button 1</li>
    <li data-tab="tab2">button 2</li>
    <li data-tab="tab3">button 3</li>
    <li data-tab="tab4">button 4</li>
    <li data-tab="tab5">button 5</li>
  </ul>
</div>

<div id="tab1" class='dropdown-content'>
  <h5>Heading One</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab2" class='dropdown-content'>
  <h5>Heading Two</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab3" class='dropdown-content'>
  <h5>Heading Three</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab4" class='dropdown-content'>
  <h5>Heading Four</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab5" class='dropdown-content'>
  <h5>Heading Five</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

我使用mouseenter 和mouseleave jQuery 方法以及slideUp 和slideDown 来提供某种OG 动画。

更新答案，不带data-tab 或data-id 给你一个解决方案https://jsfiddle.net/vh7rajh6/1/

$('#secondary-menu li').mouseenter(function(){ 
  $('#tab' + ($(this).index()+1)).slideDown();
}).mouseleave(function(){
  $('#tab' + ($(this).index()+1)).slideUp();
});

.dropdown-content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="secondary-menu">
  <ul>
    <li>button 1</li>
    <li>button 2</li>
    <li>button 3</li>
    <li>button 4</li>
    <li>button 5</li>
  </ul>
</div>

<div id="tab1" class='dropdown-content'>
  <h5>Heading One</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab2" class='dropdown-content'>
  <h5>Heading Two</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab3" class='dropdown-content'>
  <h5>Heading Three</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab4" class='dropdown-content'>
  <h5>Heading Four</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab5" class='dropdown-content'>
  <h5>Heading Five</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

希望这会对你有所帮助。