.slideToggle()放在一个DIV上,而不是所有其他同一个类 [英] .slideToggle() on one DIV instead of all others with same class
问题描述
我试图用开胃菜,汤等DIV创建一个菜单.我使用段落标签作为切换器.我所有的切换器都具有相同的切换"类.所有DIV区域都具有相同的类别选择".如何做到这一点,所以当我单击切换器时,它只是在其上方显示了DIV类.抱歉,我的编码很乱.
I'm trying to create a menu with DIVs for Appetizers, Soups, etc. I use paragraph tabs as my toggler. All of my togglers have identical classes of "toggle". All of the DIV areas have the same class, "selection." How do I make it so when I click on a toggler, it just reveals the DIV class right above it. Sorry, my coding is messy.
jQuery:
$(document).ready(function(){
$('.toggle').click(function(){
$('.selection').slideToggle("slow");
});<br>
});
CSS:
.selection,.toggle
{
width: 700px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
marign-lift: auto;
padding: 5px;
background: white;
border: solid 2px gray;
}
.toggle
{
text-align: center;
}
.selection
{
display: none;
text-align: left;
}
HTML:
<div class="selection">
Special Appetizer 8.95 <br>
Small Appetizer Plate 7.50
</div>
<p class="toggle">Appetizers</p>
<div class="selection">
Broccoli & Cream Soup $5.50 <br>
Clam Chowder 7.50
</div>
<p class="toggle">Soups</p>
<div class="selection">
Fried Rice 4.95 <br>
</div>
<p class="toggle">Rice</p>
推荐答案
您可以将某项相对于被点击的项作为目标:
You can target an item relative to the one that was clicked on like this:
$(document).ready(function(){
$('.toggle').click(function(){
$(this).prev('.selection').slideToggle("slow");
});
});
这将在.toggle
项上单击并获得上一个.selection
项,然后只滑动一次.
This will get the clicked on .toggle
item and get the previous .selection
item and slideToggle just that one.
您可以在这里看到它的工作: http://jsfiddle.net/jfriend00/2zJ8z/
You can see it work here: http://jsfiddle.net/jfriend00/2zJ8z/
我建议您对其进行改进,以便您可以单击.selection项目使其消失,因为这使切换鼠标变得更容易一些:
I would suggest improving it so you can click on the .selection item to make it go away as this makes toggling to explore with the mouse a little easier:
$(document).ready(function(){
$('.toggle').click(function(){
$(this).prev('.selection').slideToggle("slow");
});
$('.selection').click(function(){
$(this).slideToggle("slow");
});
});
您可以在此处看到此较小的增强功能: http://jsfiddle.net/jfriend00/JrhNz/
You can see this minor enhancement here: http://jsfiddle.net/jfriend00/JrhNz/
如果您要在打开一个新打开的窗口时关闭其他打开的窗口,则可以使用以下方法:
If you want any other open ones to close when you open a new one, you could use this:
$(document).ready(function(){
$('.toggle').click(function(){
var prev = $(this).prev('.selection');
$(this).siblings('.selection').not(prev).slideUp("slow");
prev.slideToggle("slow");
});
$('.selection').click(function(){
$(this).siblings('.selection').slideUp("slow");
$(this).slideToggle("slow");
});
});
此处的此选项的演示: http://jsfiddle.net/jfriend00/JrhNz/6/
Demo of this option here: http://jsfiddle.net/jfriend00/JrhNz/6/
这篇关于.slideToggle()放在一个DIV上,而不是所有其他同一个类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!