Нужна помощь, сложная задача

Тема в разделе "JavaScript", создана пользователем Kerm84, 22 фев 2012.

Модераторы: ZiX
  1. Kerm84

    Kerm84

    Регистр.:
    17 июн 2011
    Сообщения:
    321
    Симпатии:
    87
    Есть код меню, примерно такой:

    <ul class="tree" style="display: block">
    <li>
    <span class="grower"></span>
    <a href="" title="">Текст</a>
    <ul style="display:none">
    <li>
    <span class="grower"></span>
    <a href="" title="">Текст</a>
    <ul>
    <li>...</li>
    <li class="last">...</li>
    </ul>
    </li>
    <li class="last">...</li>
    </ul>
    </li>
    ........... разрыв ......
    <li>
    <span class="grower"></span>
    <a href="" title="">Текст</a>
    <ul style="display:none">
    <li>
    <span class="grower"></span>
    <a href="" title="">Текст</a>
    <ul>
    <li>...</li>
    <li class="last">...</li>
    </ul>
    </li>
    <li class="last">...</li>
    </ul>
    </li>
    </ul>


    Нужен скрипт который бы добавлял к тэгам <ul> выделенным красным, класс, только к ним, не к внутренним. Меню генерится автоматом, в ручную скрипт не вставить где то между пунктами меню, можно только до или после.
     
  2. dino

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    Если там (и только там) всегда есть style="display:none", то эти участки будут по умолчанию скрыты и к ним, с помощью например, jquery можно применить
    Код:
    <script language="javascript">
    $(function(){
    $("ul:hidden").attr("class", "указываем нужный класс");
    });
    </script>
    
     
  3. Viodele

    Viodele Механик

    Administrator
    Регистр.:
    17 дек 2011
    Сообщения:
    110
    Симпатии:
    479
    Если нет подключенных внешних фреймворков а-ля jQuery, то туго. В любом случае, нужно начать искать, за что-бы зацепиться. Самый простой вариант - это зацепить метод стиля "display:none". В результате, получим что-то вроде этого:
    HTML:
    <script type="text/javascript">
        var ul_array = document.getElementsByTagName('ul');
       
        for (var i in ul_array) {
            if (typeof(ul_array[i].style) != 'object') continue;
            if (!ul_array[i].style.display) continue;
           
            if (ul_array[i].style.display == 'none') {
                ul_array[i].className = 'my_new_class';
            }
        }
    </script>
    Думаю понятно, что данный скрипт должен выполняться уже после отображения контента страницы. На счет кроссбраузерности тоже не проверял. :D
     
  4. Kerm84

    Kerm84

    Регистр.:
    17 июн 2011
    Сообщения:
    321
    Симпатии:
    87
    Да там в подменю есть другие <ul> спрятанные.

    Вот меню _http://shoploragrig.ru/ на этом сайте.

    Вот код который его выводит:

    Код:
    //animate the opening of the branch (span.grower jQueryElement)
    function openBranch(jQueryElement, noAnimation) {
            jQueryElement.addClass('OPEN').removeClass('CLOSE');
            if(noAnimation)
                jQueryElement.parent().find('ul:first').show();
            else
                jQueryElement.parent().find('ul:first').slideDown();
    }
    //animate the closing of the branch (span.grower jQueryElement)
    function closeBranch(jQueryElement, noAnimation) {
        jQueryElement.addClass('CLOSE').removeClass('OPEN');
        if(noAnimation)
            jQueryElement.parent().find('ul:first').hide();
        else
            jQueryElement.parent().find('ul:first').slideUp();
    }
     
    //animate the closing or opening of the branch (ul jQueryElement)
    function toggleBranch(jQueryElement, noAnimation) {
        if(jQueryElement.hasClass('OPEN'))
            closeBranch(jQueryElement, noAnimation);
        else
            openBranch(jQueryElement, noAnimation);
    }
     
    //when the page is loaded...
    $(document).ready(function () {
        //to do not execute this script as much as it's called...
        if(!$('ul.tree.dhtml').hasClass('dynamized'))
        {
            //add growers to each ul.tree elements
            $('ul.tree.dhtml ul').prev().before("<span class='grower OPEN'> </span>");
           
            //dynamically add the '.last' class on each last item of a branch
            //$('ul.tree.dhtml li ul').first().addClass('unhide');
            $('ul.tree.dhtml ul li:last-child, ul.tree.dhtml li:last-child').addClass('last');
           
            //collapse every expanded branch
            $('ul.tree.dhtml span.grower.OPEN').addClass('CLOSE').removeClass('OPEN').parent().find('ul:first').hide();
            $('ul.tree.dhtml').show();
            //$('ul.tree.dhtml li ul').first().css('display', 'block');
            //open the tree for the selected branch
                $('ul.tree.dhtml .selected').parents().each( function() {
                    if ($(this).is('ul'))
                        toggleBranch($(this).prev().prev(), true);
                });
                toggleBranch( $('ul.tree.dhtml .selected').prev(), true);
           
            //add a fonction on clicks on growers
            $('ul.tree.dhtml span.grower').click(function(){
                toggleBranch($(this));
            });
            //mark this 'ul.tree' elements as already 'dynamized'
            $('ul.tree.dhtml').addClass('dynamized');
     
            $('ul.tree.dhtml').removeClass('dhtml');
        }
    });
    Мне нужно сделать чтобы первые два пункта в нем были раскрыты, вот так:

    [​IMG]
     
  5. Kerm84

    Kerm84

    Регистр.:
    17 июн 2011
    Сообщения:
    321
    Симпатии:
    87
    Попробовал вот так:

    Код:
    $('ul.tree.dhtml li ul').first().css('display', 'block');
    Но это открывает только первый UL
     
  6. Viodele

    Viodele Механик

    Administrator
    Регистр.:
    17 дек 2011
    Сообщения:
    110
    Симпатии:
    479
    Код:
    $('ul.tree.dhtml li ul').each(function () {
        $(this).css('display', 'block');
    });
    Так не вариант?
     
  7. SandZ

    SandZ Создатель

    Регистр.:
    19 июл 2009
    Сообщения:
    16
    Симпатии:
    1
    Код:
    $('ul.tree li > ul:hidden').not("ul li ul li ul").show();
    
    Работает) выпадает только второй уровень
     
  8. Kerm84

    Kerm84

    Регистр.:
    17 июн 2011
    Сообщения:
    321
    Симпатии:
    87
    Круто! Спасибо всем за ответы, ZandZ помог мне.
     
  9. Kerm84

    Kerm84

    Регистр.:
    17 июн 2011
    Сообщения:
    321
    Симпатии:
    87
    Теперь у меня другая проблема...когда список раскрывается, то меняеться "+" на "-" в меню, обозначающий раскрытие, скрытие меню. У тэга <span> в зависимости от выбора добавляется класс OPEN или CLOSE.

    Теперь мне нужно и у первый двух span класс сменить, я перепробовал все значения и чего то не выходит, помогите, пока смог изменить класс только первому спану..

    Код:
    $('ul.tree li > span.grower.CLOSE').first().addClass('OPEN').removeClass('CLOSE');