JQuery переключать открывать / закрывать div - PullRequest
Новая
       21

JQuery переключать открывать / закрывать div

0 голосов
/ 23 июня 2011

В настоящее время у меня есть меню, содержащее 3 ссылки, которые открывают для себя скрытый div-элемент и используют этот код jquery (см. Ниже), но хотелось бы, чтобы, если div открыт, при открытии второго div он закрывает оригинал открытый див ...

т.е. если "foobox" открыт, а затем пользователь нажимает "foo2", чтобы открыть "foobox2", "foobox" закроется 

$('#foo').toggle(function(){
 $('#foobox').animate({marginLeft: '354'}, 1000);
},
function(){
  $('#foobox').animate({marginLeft: '0'}, 1000);
});

$('#foo2').toggle(function(){
 $('#foo2box').animate({marginLeft: '354'}, 1000);
},
function(){
  $('#foobox3').animate({marginLeft: '0'}, 1000);
});

$('#foo3').toggle(function(){
 $('#foobox3').animate({marginLeft: '354'}, 1000);
},
function(){
  $('#foobox3').animate({marginLeft: '0'}, 1000);
});

как обычно, заранее спасибо.

Ответы [ 5 ]

2 голосов
/ 23 июня 2011

Когда вы открываете один, добавьте в него новый класс, который указывает, что он является активным.И каждый раз, когда вы что-то открываете, закрываете активный. 

$('#foo').toggle(function(){
    $('.active').animate({marginLeft: '0'}, 1000).removeClass('active');
    $('#foobox').animate({marginLeft: '354'}, 1000).addClass('active');
    },
 function(){
    $('#foobox').animate({marginLeft: '0'}, 1000).removeClass('active');
});

Также я бы порекомендовал изменить ваш HTML и jQuery, чтобы вам понадобился только один обработчик событий.Например, вместо этого: 

<div id="foo">Link</div>
<div id="foobox">Content</div>

<div id="foo2">Link</div>
<div id="foobox2">Content</div>

Вы можете сделать: 

<div class="foo" data-target="1">Link</div>
<div id="foobox-1">Content</div>

<div class="foo" data-target="2">Link</div>
<div id="foobox-2">Content</div>

со следующим jQuery: 

$('.foo').toggle(function(){

    $('.active').animate({marginLeft: '0'}, 1000).removeClass('active');
    $('#foobox-'+$(this).data('target')).animate({marginLeft: '354'}, 1000).addClass('active');

},function(){

    $('#foobox-'+$(this).data('target')).animate({marginLeft: '0'}, 1000).removeClass('active');

});
1 голос
/ 23 июня 2011

Используйте классы, такие как, например, class="special", а затем используйте jQuery, чтобы наложить закрытие или отменить анимационное действие для этого класса перед открытием текущего класса, чтобы все меню этого класса были закрыты, а текущий открылся.

Предположим, ваш html 

<div id="foo" class="menu">
    <div id="foobox" class="special"></div>
</div>
<div id="foo2" class="menu">
    <div id="foo2box" class="special"></div>
</div>
<div id="foo3" class="menu">
    <div id="foobox3" class="special"></div>
</div>

И jQuery будет выглядеть следующим образом 

$('.special').live('click',function(){
    $('#foo').toggle(function(){
        $('.special').animate({marginLeft: '0'}, 1000);
        $('#foobox').animate({marginLeft: '354'}, 1000);
    },
    function(){
        $('#foobox').animate({marginLeft: '0'}, 1000);
    });

    $('#foo2').toggle(function(){
        $('.special').animate({marginLeft: '0'}, 1000);
        $('#foo2box').animate({marginLeft: '354'}, 1000);
    },
    function(){
        $('#foo2box').animate({marginLeft: '0'}, 1000);
    });

    $('#foo3').toggle(function(){
        $('.special').animate({marginLeft: '0'}, 1000);
        $('#foobox3').animate({marginLeft: '354'}, 1000);
    },
    function(){
        $('#foobox3').animate({marginLeft: '0'}, 1000);
    });
});

Пример на JSFIDDLE.net

1 голос
/ 23 июня 2011

Добавьте ко всем элементам foo (#foo, # foo2, # foo3 ..) класс foo Также добавьте ко всем элементам foobox (#foobox, # foobox2, # foobox3 ..) класс foobox и используйте это:

$('.foo').live('click', function () {
if (!$(this).next().is(':visible')) {
$('.foobox').hide();
$(this).next().slideToggle();
if ($(this).next().is(':visible')) {
    //DoSomething
}
}
//DoSomething }
});
0 голосов
/ 23 июня 2011

Я считаю, что функциональность, о которой вы говорите, описана в http://docs.jquery.com/UI/Accordion

0 голосов
/ 23 июня 2011 
$('#foobox').animate({marginLeft: '354'}, 1000).data( 'open', true );

Дайте данные каждый раз, когда вы открываете div, затем каждый раз, когда вы открываете div, также проверяйте, есть ли у всех остальных div .data('open') == true, если это так, значит, они открыты, поэтому закройте их и удалитезначение данных.

РЕДАКТИРОВАТЬ

Вы также можете сохранить открытый элемент в переменной, например: 

$('#foobox').animate({marginLeft: '354'}, 1000);
$opened_element = $('#foobox');

Затем при открытии другого окна, просто закройте $ open_element.Вероятно, это должна быть глобальная переменная, дающая ваш код.

...