javascript - 文件浏览器 Accordion

Question

我正在使用 jquery 制作文件浏览器。我想重新确定哪个 li 中有一个类文件。但它也将子菜单重新识别为文件。

我做错了什么？

Jquery:

        $(document).ready(function() {

            $("#accordion > li").click(function() {

                if (!$(this).hasClass("active")) {
                    // Remove the class from anything that is active
                    $("li.active").removeClass("active");
                    // And make this active
                    $(this).toggleClass("active");
                    /*$('li').removeClass('active');
                     $(this).addClass('active');*/
                }
                if (false == $(this).next().is(':visible')) {
                    $('#accordion > ul').slideUp(300);
                }
                if ($('li:first-child').hasClass('file')) {
                    console.log("Is file");
                    // handle as file
                } else {
                    $(this).next().slideToggle(300);
                }

            });
            $("#accordion > ul li").click(function() {
                /*$('#accordion > ul li').removeClass('active');*/
                $(this).addClass('active');
                if (false == $(this).next().is(':visible')) {
                    $('#accordion > ul li ul').slideUp(300);
                }
                if ($('li:first-child').hasClass('file')) {
                    console.log("Is file");
                } else {
                    $(this).next().slideToggle(300);
                }

            });

            $('.top:even').addClass('stripe');
            $('#accordion ul li:odd').addClass('stripe');
            $('#accordion ul li ul li:even').addClass('stripe');

        });

菜单:

                <div id="menu">

                    <ul id="accordion">
                        <li class="top">
                            <a href="#"><img src="images/folder-icon.png" />Sports</a>
                        </li>
                        <ul>
                            <li>
                                <a href="#"><img src="images/folder-icon.png" />Golf</a>
                            </li>
                            <ul>
                                <li>
                                    <a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem 1</a>
                                </li>
                                <li>
                                    <a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem 2</a>
                                </li>
                                <li>
                                    <a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem 3</a>
                                </li>
                                <li>
                                    <a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem 4</a>
                                </li>
                            </ul>
                            <li>
                                <a href="#"><img src="images/folder-icon.png" />Cricket</a>
                            </li>
                            <ul>
                                <li>
                                    <a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem</a>
                                </li>
                                <li>
                                    <a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem</a>
                                </li>
                                <li>
                                    <a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem</a>
                                </li>
                                <li>
                                    <a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem</a>
                                </li>
                            </ul>
                            <li>
                                <a href="#"><img src="images/folder-icon.png" />Football</a>
                            </li>
                        </ul>
                        <li class="top">
                            <a href="#"><img src="images/pdf-folder-icon.png" />Technology</a>
                        </li>
                        <ul>
                            <li>
                                <a class="file" href="#">iPhone</a>
                            </li>
                            <li>
                                <a class="file" href="#">Facebook</a>
                            </li>
                            <li>
                                <a class="file" href="#">Twitter</a>
                            </li>
                        </ul>
                        <li class="top">
                            <a href="#"><img src="images/pdf-folder-icon.png" />Latest</a>
                        </li>
                        <ul>
                            <li>
                                <a class="file" href="#">Obama</a>
                            </li>
                            <li>
                                <a class="file" href="#">Iran Election</a>
                            </li>
                            <li>

                                <a class="file" href="#">Health Care</a>
                            </li>
                        </ul>
                    </ul>

                </div><!--- menu --->

Answer 1

您需要使用 li:first-child 属性