css jquery menu - toggleSlide show hide div

Question

Проверьте код here!

Это мои проблемы:

1. Div не будет переключаться, чтобы скрыть, когда самость щелкнул, только тогда, когда я нажимаю другую. (редактировать: или в основном где угодно)

2. Все блоки, которые должны быть скрыты, мигают, когда страница загружается, а затем исчезает. Любой способ избежать этого? (разрешено это! css display: none;)

3. Щелкнувший div должен сохранять свой выделенный цвет фона до тех пор, пока не будет нажата другая или «я». Не могу понять, что это.

4. (сбоку), когда я открываю страницу на ipad, menu_row сохраняет свой: hover backgroundcolor при нажатии. Это нормально, но когда нажимается «я», а показанный div убирается, он должен возвращаться к серому. Возможное?

Answer 1

1.

jQuery(document).ready(function($) { 

    //cache the `.menuImage` elements since they will be used frequently 
    var $menuImages = $(".menuImage").hide('slow'); 
    $(".menuItem").click(function() { 

     //get the `.menuImage` element that is a child of the clicked element 
     var $ele = $(this).children(".menuImage"); 

     //`.slideUp()` all the `.menuImage` elements that aren't a child of the clicked element 
     $menuImages.not($ele).slideUp(500); 

     //toggle the visibility of the child of the clicked element 
     $ele.slideToggle(500); 
    }); 
});​ 

Демо: http://jsfiddle.net/jasper/XcJwW/17/

3.

jQuery(document).ready(function($) { 
    var $menuImages = $(".menuImage").hide('slow'); 
    $(".menuItem").click(function() { 
     var $ele = $(this).children(".menuImage"); 

     //not only slide the rest of the `.menuImage` elements away, but also remove the `hover` class from them 
     $menuImages.not($ele).slideUp(500).parent().removeClass('hover'); 

     //not only toggle the view of the clicked `.menuImage` element, but also toggle the `hover` class for the element 
     $ele.slideToggle(500).parent().toggleClass('hover'); 
    }); 
});​ 

Это требует небольшой настройки для вашего CSS:

#menu_row1 .menuItem:hover, #menu_row1 .menuItem.hover { background:#ff0000; } 
#menu_row2 .menuItem:hover, #menu_row2 .menuItem.hover { background:#ffe100; } 
#menu_row3 .menuItem:hover, #menu_row3 .menuItem.hover { background:#0033cc; } 

Обратите внимание, что пользователь может использовать hover над одним из этих элементов, или вы можете дать элементу класс hover, оба будут иметь одинаковый результат.

Демо: http://jsfiddle.net/jasper/XcJwW/20/

Answer 2

1. Это потому, что вы скрываете его, прежде чем slidetoggle, что делает его переключения, чтобы показать. Чтобы исправить это, скройте все элементы, кроме одного непосредственно под вашим текущим узлом (я бы рекомендовал использовать filter() или not()). Что-то вроде:

   var self = $(this); 
   // Filter out elements that are descendants of this 
   $('menuItem').filter(function() { return ! self.has(this); }).hide(); 
   

2. Это потому, что вы делаете .hide('slow') на .ready. Избавьтесь от медленного, и это должно решить проблему.

3. Если вы объявляете стиль для :hover, вам также необходимо объявить, что для класса, который вы добавляете/удаляете по клику. Таким образом, вы сохраните эти стили.
4. Честно говоря, я не знаю. iPad не имеет зависания, поэтому я предполагаю, что они применяют его на основе :active. Если вы явно установили стиль :active, он может использовать это вместо стиля :hover.

Answer 3

Измените сценарий к этому:

jQuery(document).ready(function($) { 
    $(".menuImage").hide(); 
    $(".menuItem").click(function() { 
    $(".menuItem").not(this).children(".menuImage").hide('slow'); 
    $(this).children(".menuImage").slideToggle(500); 
    }); 
}); 

Вторая часть вашего сценария не требуется.