![](/img/trans.png)
[英]JQUERY, When an LI is clicked and the click was not on an <A href> Toggle
[英]Toggle div jQuery from <li> click
我試圖將類“ open-height”添加到div中,並在列表項之間單擊時保留該類。 然后,當您單擊同一列表項時,刪除該類。
$('#navlist a').click(function(e) {
e.preventDefault(); //prevent the link from being followed
$('#navlist a').removeClass('selected');
$(this).addClass('selected');
if($(this).hasClass('selected')) {
$('.single-course-wrapp').toggleClass('open-height');
} else {
$('.single-course-wrapp').addClass('open-height');
}
});
工作提琴 。
您可以使用data-*
屬性來實現,方法是,將li的id存儲在div中的data-opened-by
屬性中,然后使條件僅在所單擊的項目具有存儲在data屬性中的相同id時才從該類中刪除該類:
$('#navlist a').click(function(e) { e.preventDefault(); //prevent the link from being followed $('#navlist a').removeClass('selected'); $(this).addClass('selected'); if($('.single-course-wrapp').hasClass('open-height')){ var opener_id = $('.single-course-wrapp').data('opened-by'); if($(this).parent().attr('id')==opener_id){ $('.single-course-wrapp').removeClass('open-height'); } }else{ $('.single-course-wrapp').addClass('open-height'); $('.single-course-wrapp').data('opened-by', $(this).parent().attr('id')); } });
.nav { color: green; } .selected { color: red; } .open-height{ height:200px; width:200px; background:#000; transition: all 0.6s ease 0.3s; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="navlist"> <li id="home"><a class="nav" href="home">Home</a></li> <li id="about"><a class="nav" href="about-us">About Us</a></li> <li id="service"><a class="nav" href="about-us">Service</a></li> <li id="contact"><a class="nav" href="about-us">Contact</a></li> </ul> <div class="single-course-wrapp"> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.