jquery - 使用 jquery 删除一个类并在单击按钮时隐藏一个 div

Question

我有一个小问题，我无法解决这个问题。请看看这个 jsfiddle:https://jsfiddle.net/1efo87j1/1/

我通过点击两个按钮显示和隐藏特定元素。我无法实现的是，如果按钮已经有一个事件类，我想隐藏出现的元素。

// set content on click
$('.jpn').click(function (setCont) {
    setCont.preventDefault();
    setContent($(this));
});

function setContent($el) {
    $('.jpn').removeClass('active');
    $('.foodNavi').hide("slow");

    $el.addClass('active');
    $($el.data('rel')).show("slow");
}

Answer 1

您可以使用内置于 jQuery 函数中的 toggleClass 和 hasClass 轻松实现这一点。

function setContent($el) {
    $el.toggleClass('active'); // 

    // remove others active elements, just 1 at a time can be active/inactive
    $('.jpn').not($el).removeClass('active'); 

    $('.foodNavi').hide("slow");
    if($el.hasClass('active'))
        $($el.data('rel')).show("slow");           
}

// set content on click
$('.jpn').click(function (setCont) {
    setCont.preventDefault();
    setContent($(this));
});

    function setContent($el) {
        $el.toggleClass('active');
        $('.jpn').not($el).removeClass('active');
        $('.foodNavi').hide("slow");
        if($el.hasClass('active'))
            $($el.data('rel')).show("slow");           
    }

.active {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-6 foodNav"><a class="jpn" data-rel="#chn" href="#">Chinese Menu</a>

</div>
<div class="col-lg-6 foodNav"><a class="jpn" data-rel="#jpn" href="#">Japanese Menu</a>

</div>
<div id="jpn" class="col-lg-12 foodNavi" style="display: none;">
    <nav>
        <ul class="">
            <li id="menu-item-21" class="menu-item menu-item-21"><a href="#about" class="linki">Soup Japanese</a>

            </li>
            <li id="menu-item-26" class="menu-item menu-item-26"><a href="#menus" class="linki">Appetizers</a>

            </li>
            <li id="menu-item-25" class="menu-item menu-item-25"><a href="#events" class="linki">Family Style Dinners</a>

            </li>
            <li id="menu-item-29" class="menu-item menu-item-29"><a href="#suppliers" class="linki">Mu-Shu</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Fried Rice</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Chow Mein</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Pan Fried Noodle</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Chow Fun</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Drinks</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Egg Fu Yung</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Sizzling Entree</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Vegetable Entree</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Pork Entree</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Prawn Entree</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Lunch Specials</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Chef's Specials</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Chicken Entree</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Beef Entree</a>

            </li>
        </ul>
    </nav>
</div>
<!--chns menu-->
<div id="chn" class="col-lg-12 foodNavi" style="display: none;">
    <nav>
        <ul class="">
            <li id="menu-item-21" class="menu-item menu-item-21"><a href="#about" class="linki">Soup</a>

            </li>
            <li id="menu-item-26" class="menu-item menu-item-26"><a href="#menus" class="linki">Appetizers</a>

            </li>
            <li id="menu-item-25" class="menu-item menu-item-25"><a href="#events" class="linki">Family Style Dinners</a>

            </li>
            <li id="menu-item-29" class="menu-item menu-item-29"><a href="#suppliers" class="linki">Mu-Shu</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki" class="linki">Fried Rice</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki" class="linki">Chow Mein</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki" class="linki">Pan Fried Noodle</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki" class="linki">Chow Fun</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki" class="linki">Drinks</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Egg Fu Yung</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Sizzling Entree</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Vegetable Entree</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Pork Entree</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Prawn Entree</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Lunch Specials</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Chef's Specials</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Chicken Entree</a>

            </li>
            <li id="menu-item-231" class="menu-item menu-item-231"><a href="#andy-hilton" class="linki">Beef Entree</a>

            </li>
        </ul>
    </nav>
</div>