Создание jQuery Accordion из нестандартной структуры HTML - PullRequest
Новая
       26

Создание jQuery Accordion из нестандартной структуры HTML

0 голосов
/ 10 марта 2010

Мы все знаем, что вы используете эту структуру, чтобы сделать аккордеон 

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

Но что, если вы хотите создать аккордеон, используя уже существующий код, установленный ужасной CMS?

Это макет 

 <div id="sideNavContent" class="clearfix">
        <ul>
        <!-- Left Nav (selected) level: 2 - Not hidden - with children -->
           <li class="NML3Selected"><div><a id="NML3LinkSelected" href="/forcedelivered.aspx" title="Force Delivered">Force Delivered</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/340.aspx" title="Test Page 1">Test Page 1</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/341.aspx" title="Test Page 2">Test Page 2</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/342.aspx" title="Test Page 3">Test Page 3</a></div></li>
           <li class="NML3"><div><a id="NML3Link" href="/ftmfaq.aspx" title="Force Training Frequently Asked Questions">FAQs</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/340.aspx" title="Test Page 1">Test Page 4</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/341.aspx" title="Test Page 2">Test Page 5</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/342.aspx" title="Test Page 3">Test Page 6</a></div></li>
           <li class="NML3"><div><a id="NML3Link" href="/trainingsupport.aspx" title="Training Support">Training Support</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/340.aspx" title="Test Page 1">Test Page 7</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/341.aspx" title="Test Page 2">Test Page 8</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/342.aspx" title="Test Page 3">Test Page 9</a></div></li>
        </ul>
        </div>

Я ПОЧТИ могу заставить его работать, он выводит только первую дочернюю ссылку в аккордеоне, я использую 

    <script type="text/javascript">
$(function() {
    $("#sideNavContent").accordion({
    collapsible: true, 
    active: false,
    header: "li.NML3",
    //header: "li:has(NML3)", //argh *sobs*
    navigation: true
    })

});
</script>

Возился с командой jQuery WAS, отказался от этого (первый заголовок как класс .NL3Selected, поэтому я хотел, чтобы аккордеон увидел, что он содержит NL3)

Любое умное приветствие jQueryness, чтобы сделать эту ужасную разметку, работает как гармошка.

р

Ответы [ 2 ]

1 голос
/ 10 марта 2010

Я бы просто написал свой собственный виджет аккордеона.

Хотя вы можете попробовать применить функцию к событию accordion change и перебирать следующие элементы <li>, пока не достигнете другого элемента заголовка. Затем оберните эти элементы в <div> и посмотрите, будет ли аккордеон работать должным образом.

0 голосов
/ 10 марта 2010

Вы можете предварительно обработать HTML и изменить его так, как вы хотите, чтобы это было так: 

var sidenav = $('#sideNavContent');
sidenav.find('li').unwrap()
.filter('.NML3, .NML3Selected').each(function(){
    $(this).nextUntil('.NML3').find('div').unwrap().wrapAll('<div></div>');
}).find('div').unwrap().find('a').unwrap().wrap('<h2>');
sidenav.accordion();
...