Question

所有，我正在创建一个手风琴菜单，当我按下“UNIT”选项卡时，它会打开一个“章节”选项卡列表，当我按下这些章节中的任何一个时，会打开一个课程列表。到目前为止，我已设法创建所有适当的列表，但默认情况下，课程和章节会自动打开，按下时的课程元素不会向上滚动到章节父母。我的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都有＆＃34;手风琴＆＃34;作为身份证。如果id不是唯一的，则事件函数可能仅绑定到第一个或最后一个，但不是全部

或者，制作＆＃34;手风琴＆＃34;一个班而不是一个id。然后你的jquery需要改为使用＆＃34; ul.accordion＆＃34;而不是＆＃34; ul＃accordion＆＃34;。

这是显示更改的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;
    });
});

如何操纵ul括号

1 个答案: