JQuery SlideDown и SlideUp внутри вложенных тегов DIV - PullRequest
Новая
       33

JQuery SlideDown и SlideUp внутри вложенных тегов DIV

1 голос
/ 20 марта 2012

Я работаю над системой меню, которая работает с двумя различными организационными структурами:

A. навести курсор на заголовок одной группы и получить весь контент, соответствующий этой группе slideDown.

B. навести курсор на категорию, которая применяется только к некоторому контенту в более чем одной группе и имеет все содержимое в этой категории slideDown, независимо от того, в какую группу они входят.

Первая часть работает следующим образом ... пример ...

http://jsfiddle.net/nWJhH/

Вторая часть создает некоторые проблемы ...

http://jsfiddle.net/GBkMB/12/

Мое намерение - например, навести курсор на «завтрак» и заставить «молоко, яблоко и салат» соскользнуть вниз, даже если они находятся в разных группах. Затем, когда вы наведите курсор мыши на заголовок «завтрак», все ниже скатится в их исходные группы. Но по какой-то причине я не могу применить слайд-даун.

Есть идеи? Спасибо !!!!!!!!!!!!!!!!!

Ответы [ 2 ]

0 голосов
/ 20 марта 2012

Это сделает свое дело, если вы хотите, чтобы отображались только элементы, применимые к кошке, также удален повторяющийся код 

$('.content').hide();
var $elms = $('.fruit, .vegetable, .dairy');
$elms.hover(function() {
var $content = $(this).children('.content');
    $content.stop(1,1).slideToggle(600);
});
var items=['breakfast','lunch','dinner'];

$(items).each(function(){
   var sel=this;
   $('#'+sel).hover(function() {
      $('.'+sel).parent().slideDown(400);
      $('.'+sel).siblings(':not(.'+sel+')').hide();
      $(this).addClass("black");},
    function(){
      $('.'+sel).parent().slideUp(400);
      $('.'+sel).siblings(':not(.'+sel+')').show();
      $(this).removeClass("black")
   });
});

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

http://jsfiddle.net/d4udts/GBkMB/29/

0 голосов
/ 20 марта 2012

Проблема в том, что родитель ваших элементов (контент) скрыт, поэтому элементы скользят, и все, кроме того, что их родитель скрыт, они не будут отображаться.:)

демо здесь: http://jsfiddle.net/nheJ9/

это не совсем аккуратно, и я изменил некоторые классы и т. Д., Но это потому, что я подумал, что это имеет больше смысла.

Дело в том, что выможно увидеть, что, когда родительский включен, они будут отображаться ^. ^

...