Question

我正在开发一个适用于两种不同组织结构的菜单系统：

一个。将鼠标悬停在一个组标题上，并使所有内容都适合该组slideDown。

B中。将鼠标悬停在仅适用于多个组中某些内容的类别上，并将此类别中的所有内容都幻灯片化，而不管它们属于哪个组。

第一部分就是这样......例子......

http://jsfiddle.net/nWJhH/

第二部分提出了一些问题......

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

我的目的是将鼠标悬停在“早餐”上，并将“牛奶，苹果和生菜”滑下，即使它们属于不同的群体。然后，当您将鼠标移出“早餐”标题时，下面的所有内容都会滑入其原始组。但由于某种原因，我似乎无法将slideDown应用。

有什么想法吗？感谢!!!!!!!!!!!!!!!!!

Answer 1

如果你只想要显示cat的元素appaple，也可以删除重复的代码

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

Answer 2

问题是您的项目（内容）的父项是隐藏的，因此项目是滑动的，但是因为他们的父项是隐藏的，所以它们不会显示。：）

演示：http://jsfiddle.net/nheJ9/

它不是很整洁，我改变了一些类等等，但那是因为我觉得它更有意义。

关键是你可以看到，当启用父级时，它们将显示^。^

嵌套DIV标记中的JQuery SlideDown和SlideUp

2 个答案: