jQuery菜单下拉气泡

时间：2017-08-25 04:58:02

标签： jquery menu bubble-popup

所以我有这个菜单需要在任何项目悬停时显示一个框。该框是一个包含标题文本和图像的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>

2 个答案:

答案 0 :(得分：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 -->

答案 1 :(得分：0)

您可以使用解决方案https://jsfiddle.net/vh7rajh6/

＆＃13;
＆＃13; 
$('#secondary-menu li').mouseenter(function(){ 
  $('#' + $(this).data('tab')).slideDown();
}).mouseleave(function(){
  $('#' + $(this).data('tab')).slideUp();
});
＆＃13; 
.dropdown-content {
  display: none;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我使用了mouseenter＆amp; mouseleave jQuery方法以及slideUp＆amp; slideDown提供某种动画。

没有data-tab或data-id的

更新回答 在这里，您可以使用解决方案https://jsfiddle.net/vh7rajh6/1/

＆＃13;
＆＃13; 
$('#secondary-menu li').mouseenter(function(){ 
  $('#tab' + ($(this).index()+1)).slideDown();
}).mouseleave(function(){
  $('#tab' + ($(this).index()+1)).slideUp();
});
＆＃13; 
.dropdown-content {
  display: none;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

希望这会对你有所帮助。

相关问题
最新问题