.slideToggle() в одном DIV вместо всех остальных того же класса

Я пытаюсь создать меню с DIV для закусок, супов и т. д. Я использую вкладки абзацев в качестве переключателя. Все мои переключатели имеют одинаковые классы «переключателей». Все области DIV имеют один и тот же класс «выбор». Как мне сделать так, чтобы при нажатии на переключатель он просто отображал класс DIV прямо над ним. Извините, мой код грязный.

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>

html hide jquery slidetoggle
person Karen Zhen    schedule 10.03.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете настроить таргетинг на элемент относительно того, на который нажали, следующим образом:

$(document).ready(function(){
    $('.toggle').click(function(){
        $(this).prev('.selection').slideToggle("slow");
    });
});

Это приведет к нажатию элемента .toggle и получению предыдущего элемента .selection, а также к слайду SlideToggle только к этому элементу.

Вы можете увидеть, как это работает здесь: http://jsfiddle.net/jfriend00/2zJ8z/

Я бы предложил улучшить его, чтобы вы могли щелкнуть элемент .selection, чтобы он исчез, поскольку это немного упрощает переключение для изучения с помощью мыши:

$(document).ready(function(){
    $('.toggle').click(function(){
        $(this).prev('.selection').slideToggle("slow");
    });

    $('.selection').click(function(){
        $(this).slideToggle("slow");
    });
});​

Вы можете увидеть это незначительное улучшение здесь: http://jsfiddle.net/jfriend00/JrhNz/

Если вы хотите, чтобы любые другие открытые закрывались при открытии нового, вы можете использовать это:

$(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/

person jfriend00    schedule 10.03.2012
comment
Вы случайно не знаете, как сделать так, чтобы один открытый закрывался, когда открывается другой? - person Karen Zhen; 10.03.2012
comment
@KarenZhen - я добавил в конец своего ответа опцию, которая закрывает любые другие открытые. - person jfriend00; 10.03.2012
comment
Это очень помогло. Благодарю вас! - person Karen Zhen; 15.03.2012

arrow_upward
0
arrow_downward

Я думаю, вы ищете .prev():

$('.toggle').click(function(){
    $(this).prev('.selection').slideToggle("slow");
});
person Alnitak    schedule 10.03.2012
comment
Вы случайно не знаете, как сделать так, чтобы один открытый закрывался, когда открывается другой? - person Karen Zhen; 10.03.2012