Question

我有一个问题，我在页面加载时使用Jquery为手风琴菜单项添加活动类。现在，当用户导航到不同的菜单标题时，我想删除该活动类。这是下面的Javascript和HTML。如果您需要更多代码，请告诉我们！：

JAVASCRIPT ---------------------------------------------- ----------------------------------

<title>Untitled Document</title>
<link rel="stylesheet" href="/CoVPrototype/css/CoV_style.css" type="text/css" />
<script type="text/javascript" src="/CoVPrototype/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/CoVPrototype/js/jquery.easing.1.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {

    $('#accordion li').children('ul').hide();
    $('.history_heading:first').addClass('active').next().show();

    $('#accordion li').click(function () {
        $('#accordion li').children('ul').slideUp('fast');
        $('#accordion li > a').each(function () {
            if ($(this).attr('rel')!='') {
                $(this).removeClass($(this).attr('rel') + 'Over');
            }
        });
        $(this).children('ul').slideDown('fast');
        $(this).children('a').addClass($(this).children('li a').attr('rel') + 'Over');
        return false;
     });
});
</script>

这里是html：----------------------------------------- -----------------------------

<ul id="accordion">
    <li>
        <a href="#" class="history_heading" rel="history_heading">HISTORY</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="geography_heading" rel="geography_heading">GEOGRAPHY</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="neighborhoods_heading" rel="neighborhoods_heading">NEIGHBORHOODS</a>
        <ul>
            <li><a href="#">Ridge</a></li>
            <li><a href="#">Local News</a></li>
            <li><a href="#">Local Events</a></li>
            <li><a href="#">Local Projects</a></li>
            <li><a href="#">Neighborhood Services</a></li>
            <li><a href="#">Area Information</a></li>
            <li><a href="#">Photo Gallery</a></li>
                <ul>
                    <li><a href="#">Park</a></li>
                    <li><a href="#">Downtown</a></li>
                    <li><a href="#">Downtown East</a></li>
                    <li><a href="#">Dunbar-South</a></li>
                    <li><a href="#">Park Place</a></li>
                    <li><a href="#">Fairway</a></li>
                    <li><a href="#">Woodland</a></li>
                    <li><a href="#">HSunrise</a></li>
                    <li><a href="#">Cedar</a></li>
                    <li><a href="#">Dale</a></li>
                    <li><a href="#">Arney</a></li>
                    <li><a href="#">Parkinson</a></li>
                    <li><a href="#">Lano</a></li>
                    <li><a href="#">Marle</a></li>
                    <li><a href="#">Mount</a></li>
                    <li><a href="#">Oak</a></li>
                    <li><a href="#">Wood</a></li>
                    <li><a href="#">Riley</a></li>
                    <li><a href="#">NEW</a></li>
                    <li><a href="#">South </a></li>
                    <li><a href="#">ITEM</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Grey</a></li>
                </ul>
        </ul>
    </li>

    <li>
        <a href="#" class="things_to_do_heading" rel="things_to_do_heading">THINGS TO DO</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="moving_to_here_heading" rel="moving_to_here_heading">MOVING TO HERE</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="population_heading" rel="population_heading">POPULATION</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="weather_heading" rel="weather_heading">WEATHER</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="education_heading" rel="education_heading">EDUCATION</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="health_heading" rel="health_heading">HEALTH</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="cemetery_heading" rel="cemetery_heading">CEMETERY</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>
</ul>

Answer 1

如果我正确理解了您的问题...将此添加到#accordion li点击事件对我有用：

if ($(this).children('a:first:not(".active")')) {
   $('a.history_heading').removeClass('active');
}

页面加载后，类history_heading的锚标记也具有active类。点击其他菜单标题（例如geography_heading）后，active课程将从history_heading中删除。

请参阅http://jsfiddle.net/Laxman13/4bYkP/1/

上的实时和工作示例

在手风琴中单击不同的菜单项后删除添加的jquery活动类

1 个答案: