j查询菜单下拉气泡

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

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

类下拉列表内容具有隐藏所有divdisplay: none。

请任何帮助不胜感激！

$('#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>

只是对代码进行一点重构，并使用显示/隐藏鼠标悬停。还使用了数据属性，用于将 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 -->

在这里，您可以提供解决方案 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&mouseleavejQuery方法以及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>

希望这对您有所帮助。

相关内容

最新更新

热门标签：