第一次点击每个导航项时保持容器打开
Keep container open for first click of each nav item
我想弄清楚如何做到这一点 -- 我需要通过单击同级列表项使一个容器保持打开状态,然后在第二次单击时将其关闭。问题要回到另一个 link 并留下一个处理程序。
这个概念是:
<ul id="nav">
<li><a href="#">Nav Item Two</a></li>
<li><a href="#">Nav Item Three</a></li>
<li><a href="#">Nav Item Four</a></li>
</ul>
<div id="nav-content">
<!-- Content changed with Ajax -->
</div>
使用这个,我正在与 ajax 交换内容,所以点击 returns 它进入我的 "nav-content" div。当我单击一个项目时,我希望内容 div 打开,然后在单击下一个导航项目 link 时保持打开状态,但在第二次单击时关闭。
尝试过使用解除绑定,但我认为这不合适,而且没有用。有什么想法吗?
您可以通过以下方式完成此操作:
- 单击
li
时给 class
- 从所有其他
li
中删除 class
- 然后在隐藏或显示 div
之前检查 class
本质上是使用 class 来跟上上次单击 li
的情况
$('#nav li').click(function(){
// remove the `active` cass form all `li`s in `#nav`
// except the one that was clicked
$('#nav li').not(this).each(function(){
$(this).removeClass('active');
});
// check if clicked element has `active` class
// if so it was just clicked for second time, close the div
if( $(this).hasClass('active') ){
$(this).removeClass('active');
$('#nav-content').hide();
}
else{
// if not it was clicked for the first time
// show the div and make the clicked element `active`
$(this).addClass('active');
$('#nav-content').show();
}
});
#nav-content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
<li><a href="#">Nav Item Two</a></li>
<li><a href="#">Nav Item Three</a></li>
<li><a href="#">Nav Item Four</a></li>
</ul>
<div id="nav-content">
<!-- Content changed with Ajax -->
Here is some content
</div>
我想弄清楚如何做到这一点 -- 我需要通过单击同级列表项使一个容器保持打开状态,然后在第二次单击时将其关闭。问题要回到另一个 link 并留下一个处理程序。
这个概念是:
<ul id="nav">
<li><a href="#">Nav Item Two</a></li>
<li><a href="#">Nav Item Three</a></li>
<li><a href="#">Nav Item Four</a></li>
</ul>
<div id="nav-content">
<!-- Content changed with Ajax -->
</div>
使用这个,我正在与 ajax 交换内容,所以点击 returns 它进入我的 "nav-content" div。当我单击一个项目时,我希望内容 div 打开,然后在单击下一个导航项目 link 时保持打开状态,但在第二次单击时关闭。
尝试过使用解除绑定,但我认为这不合适,而且没有用。有什么想法吗?
您可以通过以下方式完成此操作:
- 单击
li
时给 class - 从所有其他
li
中删除 class - 然后在隐藏或显示 div 之前检查 class
本质上是使用 class 来跟上上次单击 li
的情况
$('#nav li').click(function(){
// remove the `active` cass form all `li`s in `#nav`
// except the one that was clicked
$('#nav li').not(this).each(function(){
$(this).removeClass('active');
});
// check if clicked element has `active` class
// if so it was just clicked for second time, close the div
if( $(this).hasClass('active') ){
$(this).removeClass('active');
$('#nav-content').hide();
}
else{
// if not it was clicked for the first time
// show the div and make the clicked element `active`
$(this).addClass('active');
$('#nav-content').show();
}
});
#nav-content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
<li><a href="#">Nav Item Two</a></li>
<li><a href="#">Nav Item Three</a></li>
<li><a href="#">Nav Item Four</a></li>
</ul>
<div id="nav-content">
<!-- Content changed with Ajax -->
Here is some content
</div>