javascript - 如何操作 ul 括号

Question

我正在创建一个 Accordion 菜单，当我按下“UNIT”选项卡时，它会打开一个“章节”选项卡列表，当我按下这些章节中的任何一个时，就会打开一个类(class)列表.到目前为止，我已经设法创建了所有合适的列表，但默认情况下，类(class)和章节会自动打开，按下类(class)元素时不会向上滚动到父章节。我的 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 元素提供唯一的 ID。单元和章节的 ul 都将“accordion”作为 id。如果 id 不唯一，则事件函数可能只绑定(bind)到第一个或最后一个，而不是所有

或者，让“accordion”成为一个类而不是一个 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;
    });
});