检测所选元素

时间:2017-03-03 12:07:15

标签: javascript accordion

我有以下Javascript来操作我的手风琴菜单。

<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>

如何修改代码以检测“已选择”&#39;类并从以下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>

这里是小提琴链接 - https://jsfiddle.net/p7wm4tL2/

1 个答案:

答案 0 :(得分:0)

你有旧版本的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