как манипулировать ul скобками

Question

hy all, я создаю аккордеонное меню, которое, когда я нажимаю на вкладку «UNIT», открывает список вкладок «Chapters», а когда я нажимаю на любую из этих глав, открывается список уроков. , До сих пор мне удавалось создавать все соответствующие списки, но по умолчанию уроки и главы открываются автоматически, а элементы уроков при нажатии не прокручиваются обратно к родителям глав. Мой html5 файл:

<script type="text/javascript" src="jqueryjs.js"></script>
<script type="text/javascript" src="jqueryuiaccor.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#accordion').accordion();
    });
</script>

<div id="container">
<div id="content">
<div id="sidebar">
        <ul id="accordion">
            <li>
                <a href="#recent" class="heading">Unit 1</a>    
                    <ul id="accordion">             
                        <li> <a href="#recent" class="heading">Chapter 1 </a> </li>
                                <ul id="accordion2">
                                    <li> Lesson 1 </li>
                                </ul>
                    </ul>
                    </li>
                    <li>
                    <a href="#recent" class="heading">Unit 2</a>    

                    <ul id="accordion">             
                        <li> <a href="#recent" class="heading">Chapter 1 </a> </li>
                                <ul id="accordion">
                                    <li> <a href="#recent" class="heading" role="tab" aria-expanded="true">Chapter 2 </a>
                                        <ul id="accordion">
                                            <li> <a href="#recent" class="heading">Lesson 1 </a></li>
                                        </ul>
                                    </li>
                                </ul>
                    </ul>
            </li>
        </ul>       
    </div>
    </div>
</div>

Мой файл acorjs.js:

$(document).ready(function() {
    $('ul#accordion a.heading').click(function() {
        $(this).css('outline','none');
        if($(this).parent().hasClass('current')) {
            $(this).siblings('ul').slideUp('slow',function() {
                $(this).parent().removeClass('current');
                $.scrollTo('#accordion',1000);

            });
        } else {
            $('ul#accordion li.current ul').slideUp('slow',function() {
                $(this).parent().removeClass('current');
            });
            $(this).siblings('ul').slideToggle('slow',function() {
                $(this).parent().toggleClass('current');
            });
            $.scrollTo('#accordion',1000);

        }
        return false;

    });

});

Есть идеи ??

Мой новый отредактированный файл:

<div id="container">
<div id="content">
<div id="sidebar">

        <ul class="accordion">
    <li>
      <a href="#recent" class="heading">Unit 1</a>    
        <ul class="accordion">             
            <li> <a href="#recent" class="heading">Chapter 1 </a> </li>
                <ul id="accordion2">
                    <li> Lesson 1 </li>
                </ul>
        </ul>
    </li>

    <li>
      <a href="#recent" class="heading">Unit 2</a>    
        <ul class="accordion">             
            <li> <a href="#recent" class="heading">Chapter 1 </a> </li>
                <ul id="accordion2">
                    <li> Lesson 1 </li>
                </ul>
        </ul>
    </li>



        </ul>       
    </div>
    </div>
</div>

мой файл JS:

$(document).ready(function() {
    $('ul.accordion a.heading').click(function() {
        $(this).css('outline','none');
        if($(this).parent().hasClass('current')) {
            $(this).siblings('ul').slideUp('slow',function() {
                $(this).parent().removeClass('current');
                $.scrollTo('#accordion',1000);
            });
        } else {
            $('ul.accordion li.current ul').slideUp('slow',function() {
                $(this).parent().removeClass('current');
            });
            $(this).siblings('ul').slideToggle('slow',function() {
                $(this).parent().toggleClass('current');
            });
            $.scrollTo('#accordion',1000);

        }
        return false;
    });
});

Помогите пожалуйста все перестало работать

Answer 1

Попробуйте присвоить элементам ul уникальные идентификаторы. У ul как для подразделений, так и для глав в качестве идентификатора есть "гармошка". Если идентификаторы не являются уникальными, функция события может быть связана только с первым или последним, но не со всеми

Альтернативно, сделайте "аккордеон" классом, а не id. Затем ваш jquery нужно будет изменить, чтобы использовать "ul.accordion" вместо "ul # accordion".

Вот фрагмент кода HTML, показывающий изменение:

<ul class="accordion">
  <li>
      <a href="#recent" class="heading">Unit 1</a>    
      <ul class="accordion">             
        <li> <a href="#recent" class="heading">Chapter 1 </a> </li>
        <ul id="accordion2">
          <li> Lesson 1 </li>

А затем изменение в коде JavaScript:

$(document).ready(function() {
    $('ul.accordion a.heading').click(function() {
        $(this).css('outline','none');
        if($(this).parent().hasClass('current')) {
            $(this).siblings('ul').slideUp('slow',function() {
                $(this).parent().removeClass('current');
                $.scrollTo('#accordion',1000);
            });
        } else {
            $('ul.accordion li.current ul').slideUp('slow',function() {
                $(this).parent().removeClass('current');
            });
            $(this).siblings('ul').slideToggle('slow',function() {
                $(this).parent().toggleClass('current');
            });
            $.scrollTo('#accordion',1000);

        }
        return false;
    });
});