javascript - 检测所选元素

Question

我有以下 Javascript 来操作我的 Accordion 菜单。

<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js"></script>
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js"></script>
<script>
    $(document).ready(function() {
        $("#accordian a").click(function() {
            var link = $(this);
            var closest_ul = link.closest("ul");
            var parallel_active_links = closest_ul.find(".active")
            var closest_li = link.closest("li");
            var link_status = closest_li.hasClass("active");
            var count = 0;

            closest_ul.find("ul").slideUp(function() {
                if (++count == closest_ul.find("ul").length)
                    parallel_active_links.removeClass("active");
            });

            if (!link_status) {
                closest_li.children("ul").slideDown();
                closest_li.addClass("active");
            }
        })

        $(".selected").parent().slideDown();
    })
</script>

如何修改代码以检测“选定”类并从以下 html 脚本打开相应的面板。

<div id="accordian">
    <ul>
        <li>
            <h3 class="mtop">&nbsp;</h3>
        </li>
        <li>
            <h3><a href="#">Dashboard</a></h3>
            <ul>
                <li class="litop"><a href="#">Reports</a></li>
                <li class="limid"><a href="#">Search</a></li>
                <li class="limid"><a href="#">Graphs</a></li>
                <li class="libot"><a href="#">Settings</a></li>
            </ul>
        </li>
        <li>
            <h3><a href="#">Calendar</a></h3>
            <ul>
                <li class="litop"><a href="#">Current Month</a></li>
                <li class="limid"><a href="#">Current Week</a></li>
                <li class="limid"><a href="#">Previous Month</a></li>
                <li class="limid"><a href="#">Previous Week</a></li>
                <li class="limid"><a href="#">Next Month</a></li>
                <li class="limid"><a href="#">Next Week</a></li>
                <li class="limid"><a href="#">Team Calendar</a></li>
                <li class="limid"><a href="#">Private Calendar</a></li>
                <li class="libot"><a href="#">Settings</a></li>
            </ul>
        </li>
        <li>
            <h3><a href="#">Favourites</a></h3>
            <ul>
                <li class="litop"><a href="#">Global favs</a></li>
                <li class="limid selected"><a href="#">My favs</a></li>
                <li class="limid"><a href="#">Team favs</a></li>
                <li class="libot"><a href="#">Settings</a></li>
            </ul>
        </li>
        <li>
            <h3 class="mbot">&nbsp;</h3>
        </li>
    </ul>
</div>

这里是 fiddle 链接 - https://jsfiddle.net/p7wm4tL2/

Answer 1

您有旧版本的 jquery，
尝试更新您的 jquery 版本。

$(document).ready(function() {
    $("#accordian a").click(function() {
        var link = $(this);
        var closest_ul = link.closest("ul");
        var parallel_active_links = closest_ul.find(".active")
        var closest_li = link.closest("li");
        var link_status = closest_li.hasClass("active");
        var count = 0;

        closest_ul.find("ul").slideUp(function() {
            if (++count == closest_ul.find("ul").length)
                parallel_active_links.removeClass("active");
        });

        if (!link_status) {
            closest_li.children("ul").slideDown();
            closest_li.addClass("active");
        }
    })

    $(".selected").parent().slideDown();
});

检查工作代码 here .