jQuery 菜单下拉气泡
Posted
技术标签:
【中文标题】jQuery 菜单下拉气泡【英文标题】：jQuery menu dropdown bubbles 【发布时间】：2018-02-03 02:34:26 【问题描述】：所以我有这个菜单需要在任何项目悬停时显示一个框。该框是一个包含标题文本和图像的 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>【问题讨论】：
【参考方案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 -->【讨论】：
看起来不错，在这两种情况下都有效，尽管我无法将 'data-id' 添加到 'li'，因为我的菜单是从 php 中提取的。如何在函数运行之前通过'#secondary-menu'中的每个'li'添加'data-id'或'data-tab'？ 有很多方法可以做到这一点。一种是通过循环遍历下拉内容的所有实例并使用简单的计数器添加 data-id 来添加 li 按钮。这样你就不需要写所有的li按钮的副本了。【参考方案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>希望这会对你有所帮助。
【讨论】：
看起来不错，在这两种情况下都有效，尽管我无法将 'data-id' 添加到 'li'，因为我的菜单是从 PHP 中提取的。如何在函数运行之前通过'#secondary-menu'中的每个'li'添加'data-id'或'data-tab'？ @BoyanStojakovic 在这里您可以使用更新后的解决方案 jsfiddle.net/vh7rajh6/1。没有data-tab 或data-id
非常感谢！我永远不会想到这样做。 :)
欢迎好友:)以上是关于jQuery 菜单下拉气泡的主要内容，如果未能解决你的问题，请参考以下文章