css jquery menu - toggleSlide показать скрыть div

Question

Проверьте код здесь !

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

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

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

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

4. (сбоку), когда я открываю страницу на ipad, menu_row сохраняет свой: hover backgroundcolor при нажатии.Это нормально, но когда нажимается self и показанный 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

Измените ваш скрипт на этот:

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

Вторая часть вашего скрипта не нужна.

Answer 3

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.