Требуется помощь JQuery - динамическое создание быстрого запуска с развертыванием / свертыванием

Question

У меня сейчас небольшая проблема.

Мне нужно, чтобы на моем сайте Sharepoint 2010 была развернутая / сворачивающаяся панель быстрого запуска. Существует множество решений и веб-частей Sharepoint 2007, которые делают именно то, что мне нужно. См. этот пример.

Однако Sharepoint 2010 не генерирует HTML для быстрого запуска так же, как в 2007 году.

Быстрый запуск Sharepoint 2007 создается с помощью таблиц и использует множество идентификаторов, а в 2010 году создается неупорядоченный список без идентификаторов.

Поскольку это сгенерированный код, я не хочу касаться разметки.

Основная разметка выглядит следующим образом:

<div class="menu vertical menu-vertical">
    <ul class="root static">
        <li class="static">
            <span class="static menu-item">
                <span class="additional-background">
                    <span class="menu-item-text">MAIN HEADING</span>
                </span>
            </span>
        </li>
        <li class="static">
            <a class="static menu-item" href="">
                <span class="additional-background">
                    <span class="menu-item-text">Sub Heading</span>
                </span>
            </a>
        </li>
        <li class="static">
            <span class="static menu-item">
                <span class="additional-background">
                    <span class="menu-item-text">MAIN HEADING</span>
                </span>
            </span>
        </li>
        <li class="static">
            <a class="static menu-item" href="">
                <span class="additional-background">
                    <span class="menu-item-text">Sub Heading</span>
                </span>
            </a>
        </li>
        <li class="static">
            <a class="static menu-item" href="">
                <span class="additional-background">
                    <span class="menu-item-text">Sub Heading</span>
                </span>
            </a>
        </li>
    </ul>
</div>

В будущем может быть любое количество главных и подзаголовков.

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

Мне нужно найти способ сделать так, чтобы событие onClick заголовка 1 соответствовало подзаголовкам под ним, а не другим подзаголовкам в документе.

Спасибо за любую помощь, которую вы можете оказать.

Answer 1

Это работает и сохраняет заголовок связным и подменю открытым, когда вы щелкаете пункты подменю.

<script type="text/javascript">
$(document).ready(function() {
// do stuff when DOM is ready

makeLNCollapsible();
}); 
function makeLNCollapsible()
{
$("div.menu-vertical>ul.root>li.static>a").toggle(
function () {
var menuitem = $(this);
$(">ul", $(this).parent()).show("fast", function() { window.location = menuitem.attr('href');});
},
function () {
$(">ul", $(this).parent()).hide("fast");
     }
); 

$("li.static>ul.static").css("display","none");
$selectedEntry = $('li.static>ul.static .selected');
if($selectedEntry.length>0) {
    $selectedEntry.parent().css("display", "block");

}
$selectedEntry = $('li.static.selected');
if($selectedEntry.length > 0) {
    $selectedEntry.children('ul.static').css("display", "block");


}
 }
 </script>

Answer 2

Работает на сайте SP2010:

<script type="text/javascript"> 
    $(document).ready(function() {
        $(".s4-ql ul.root > li > .menu-item").click(function(){
            $(this).next('ul').toggle('slow');

        });

    }); 




</script>

Примечание. Я скрываю подзаголовки в пользовательском CSS, чтобы не задерживать загрузку страницы: / скрыть подменю / .s4-ql UL.root UL { Дисплей: нет; }

Answer 3

Вот и мы (даже проверили):

    $(function() {
        //hide sub headings
        $('li:has(a.menu-item)').hide();
        //show subs on parent click
        $('li:has(span.menu-item)').click(function() {
            //get sub headings and show them
            $(this).nextUntil('li:has(span.menu-item)').toggle();
        });
    });

Answer 4

Я понял это!

Я обнаружил, что функция nextAll () делает именно то, что мне нужно.

        $(".menu.vertical.menu-vertical > .root.static > li > span").parent().addClass('MainHeading');
        $('.MainHeading').css('cursor', 'pointer');
        $(".menu.vertical.menu-vertical > .root.static > li > a").parent().addClass('SubHeading');

        $('.MainHeading').click(function(){
                $(this).nextAll('li').each(function(){
                    elm = $(this)

                    if(elm.hasClass('MainHeading')){
                        return false;
                    }
                    else if(elm.hasClass('SubHeading')){
                        if(elm.css('display') == 'none')
                        {
                            elm.show();
                        }
                        else{
                            elm.hide();
                        }

                    }
                });
        });

Answer 5

Если я правильно вас понял, при щелчке по главному заголовку просто перейдите к родителю li, используя parentUntil ('li'), затем используйте next ('li a') (или просто li), чтобы перейти кследующий li с подзаголовком и ходом там, где вам нужно.

Возможно, это слишком неудобное решение для вас.