我有一个小问题,我无法解决这个问题。请看看这个 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");
}
最佳答案
您可以使用内置于 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>
关于jquery - 使用 jquery 删除一个类并在单击按钮时隐藏一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29757788/