切换多个元素(li)，除了被单击的元素
toggle the multiple element(li) except the element clicked on
在我的html代码中有多个可折叠列表的li元素。我想切换所有其他的li元素，除了元素点击使用jQuery。
$(document).ready(function () {
$("#boys").on('click', function () {
$("#hacky").toggle();
$("#walking1").toggle();
$("#walking2").toggle();
$("#walking3").toggle();
});
$("#hacky").on('click', function () {
$("#boys").toggle();
$("#walking1").toggle();
$("#walking2").toggle();
$("#walking3").toggle();
});
$("#walking1").on('click', function () {
$("#boys").toggle();
$("#hacky").toggle();
$("#walking2").toggle();
$("#walking3").toggle();
});
$("#walking2").on('click', function () {
$("#boys").toggle();
$("#hacky").toggle();
$("#walking1").toggle();
$("#walking3").toggle();
});
$("#walking3").on('click', function () {
$("#boys").toggle();
$("#hacky").toggle();
$("#walking1").toggle();
$("#walking2").toggle();
});
});
我给每个li元素一个id，然后我切换它们。这不是最有效的方法，代码只能处理静态文本。li元素可以增加或减少，我想以一种有效的方式做到这一点，这样即使将来添加元素，我也不必每次都添加id并编写代码。我不知道如何有效地使用find()和this标签，我是jQuery的新手。
编辑:
HTML代码:<div class="weekday-block">
<ul class="collapsible roster-collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header active roster-header">
<h2>Tue 30 June,2015</h2>
</div>
<!-- /.collapsible-header -->
<div class="collapsible-body main-collapsible">
<ul class="multi-activity-wrapper collapsible-container">
<li class="collapsible-wrapper" id="boys">
<ul class="collapsible activity-collapsible" data-collapsible="accordion">
<li class="activity-head">
<div class="collapsible-header roster-header">
<h3>Boys's Basketball Meeting</h3>
</div>
<!-- /.collapsible-header -->
<div class="collapsible-body">
<ul class="roster-activity">
<li>
<h4>Activity</h4>
<h3>CLUBS -> Athletic</h3>
</li>
<li>
<h4>Room</h4>
<h3>425</h3>
</li>
<li>
<h4>Capacity</h4>
<h3>5/25</h3>
</li>
<li>
<h3>Kevin Schieler</h3>
</li>
</ul>
</div>
<!-- /.collapsible-body -->
<div class="activity-button-block roster-activity-button-block">
<input type="button" onclick="window.location.href='javascript:void(0)'" id="button" class="waves-effect waves-light btn" value="Active">
</div>
<!-- /.activity-button-block -->
</li>
</ul>
</li>
<!-- /.collapsible-wrapper -->
<li class="collapsible-wrapper" id="hacky">
<ul class="collapsible activity-collapsible" data-collapsible="accordion">
<li class="activity-head">
<div class="collapsible-header roster-header">
<h3>Hacky Sack Club</h3>
</div>
<!-- /.collapsible-header -->
<div class="collapsible-body">
<ul class="roster-activity">
<li>
<h4>Activity</h4>
<h3>CLUBS -> Athletic</h3>
</li>
<li>
<h4>Room</h4>
<h3>425</h3>
</li>
<li>
<h4>Capacity</h4>
<h3>5/25</h3>
</li>
<li>
<h3>Kevin Schieler</h3>
</li>
</ul>
</div>
<!-- /.collapsible-body -->
<div class="activity-button-block roster-activity-button-block">
<input type="button" onclick="window.location.href='javascript:void(0)'" id="button" class="waves-effect waves-light btn" value="Set as Active">
</div>
<!-- /.activity-button-block -->
</li>
</ul>
</li>
<!-- /.collapsible-wrapper -->
<li class="collapsible-wrapper" id="walking1">
<ul class="collapsible activity-collapsible" data-collapsible="accordion">
<li class="activity-head">
<div class="collapsible-header roster-header">
<h3>Walking Club</h3>
</div>
<!-- /.collapsible-header -->
<div class="collapsible-body">
<ul class="roster-activity">
<li>
<h4>Activity</h4>
<h3>CLUBS -> Athletic</h3>
</li>
<li>
<h4>Room</h4>
<h3>425</h3>
</li>
<li>
<h4>Capacity</h4>
<h3>5/25</h3>
</li>
<li>
<h3>Kevin Schieler</h3>
</li>
</ul>
</div>
<!-- /.collapsible-body -->
<div class="activity-button-block roster-activity-button-block">
<input type="button" onclick="window.location.href='javascript:void(0)'" id="button" class="waves-effect waves-light btn" value="Set as Active">
</div>
<!-- /.activity-button-block -->
</li>
</ul>
</li>
<!-- /.collapsible-wrapper -->
<li class="collapsible-wrapper" id="walking2">
<ul class="collapsible activity-collapsible" data-collapsible="accordion">
<li class="activity-head">
<div class="collapsible-header roster-header">
<h3>Walking Club</h3>
</div>
<!-- /.collapsible-header -->
<div class="collapsible-body">
<ul class="roster-activity">
<li>
<h4>Activity</h4>
<h3>CLUBS -> Athletic</h3>
</li>
<li>
<h4>Room</h4>
<h3>425</h3>
</li>
<li>
<h4>Capacity</h4>
<h3>5/25</h3>
</li>
<li>
<h3>Kevin Schieler</h3>
</li>
</ul>
</div>
<!-- /.collapsible-body -->
<div class="activity-button-block roster-activity-button-block">
<input type="button" onclick="window.location.href='javascript:void(0)'" id="button" class="waves-effect waves-light btn" value="Set as Active">
</div>
<!-- /.activity-button-block -->
</li>
</ul>
</li>
<!-- /.collapsible-wrapper -->
<li class="collapsible-wrapper" id="walking3">
<ul class="collapsible activity-collapsible" data-collapsible="accordion">
<li class="activity-head">
<div class="collapsible-header roster-header">
<h3>Walking Club</h3>
</div>
<!-- /.collapsible-header -->
<div class="collapsible-body">
<ul class="roster-activity">
<li>
<h4>Activity</h4>
<h3>CLUBS -> Athletic</h3>
</li>
<li>
<h4>Room</h4>
<h3>425</h3>
</li>
<li>
<h4>Capacity</h4>
<h3>5/25</h3>
</li>
<li>
<h3>Kevin Schieler</h3>
</li>
</ul>
</div>
<!-- /.collapsible-body -->
<div class="activity-button-block roster-activity-button-block">
<input type="button" onclick="window.location.href='javascript:void(0)'" id="button" class="waves-effect waves-light btn" value="Set as Active">
</div>
<!-- /.activity-button-block -->
</li>
</ul>
</li>
<!-- /.collapsible-wrapper -->
</ul>
</div>
<!-- /.collapsible-body -->
</li>
</ul>
</div>
<!-- /.weekday-block -->您可以通过使用jquery ' this
$(".collapsible-wrapper").click(function(){
$(".collapsible-wrapper").not(this).toggle();
});
你可以这样做:
$("li").click(function () {
$("li").not(this).toggle();
});
或者，您可以这样做:
$("li").click(function () {
$("li").toggle();
$(this).toggle(); // Retoggle
});
我刚刚添加了li目标作为此概念的示例。实际上，您需要添加一个类来作为您想要切换的特定<ul>元素的选择器，否则它将切换页面上的所有<li>元素。
下面是一个例子:
$(".myList li").click(function () {
$(".myList li").not(this).toggle();
});
- 为所有
<li>元素添加一个通用类 - 使用公共类 在元素上绑定事件
- 使用
this上下文和siblings()来获取点击的 之外的其他元素 -
toggle兄弟元素 - 我也会建议你使用
fadeToggle()或slideToggle()平滑动画
$(document).ready(function() {
$('.myLis').on('click', function() {
$(this).siblings('.myLis').slideToggle();
});
});ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
color: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul>
<li id="walking2" class="myLis">1</li>
<li id="boys" class="myLis">2</li>
<li id="hacky" class="myLis">3</li>
<li id="walking1" class="myLis">4</li>
<li id="walking3" class="myLis">5</li>
</ul>
在问题中添加HTML后
您可以使用以下命令来切换其他li . s。
// On click of the li
$('.collapsible-wrapper').on('click', function () {
$('.collapsible-wrapper').not(this).slideToggle();
// toggle li elements other than the clicked
});
可以这样写:
HTML:<li onclick="javascript:collapse(this)">test1</li>
脚本:
function collapse(e) {
var elem = document.getElementsByTagName("li");
for(var i=0;i<elem.length;i++)
if(elem[i]!=e) elem[i].toggle();
}
我的例子是原生JS，所以。toggle()不起作用
相关文章：
- 对同一类中的所有元素单击一次
- 元素单击处理程序由一个神秘的函数取消设置
- 在处理元素单击事件期间，在循环内部调用window.open(）
- JS-是否可以获得元素单击位置的确切宽度
- 使用 jQuery 创建动态元素 单击事件始终返回 for 循环中的最后一个索引
- 选中父元素单击上的复选框
- 在窗口和其他元素单击时隐藏
- Polymerjs 的自定义菜单元素单击事件
- 使用 javascript 函数查找元素单击的类
- 元素单击仅使用 javascript
- 等待文档鼠标按下完成，然后元素单击才能开始
- 由于父元素的顶部和位置，子元素单击不起作用
- Jquery-在共享相同类名的其他元素之间选择一个元素(单击时）
- 目标元素单击子元素，获取父属性
- 根据元素单击更改选择选项值
- 为listview上动态生成的元素单击event
- 扩展原生元素单击事件
- 可以被许多元素使用的Javascript函数，然后区分哪个元素单击了它
- 当元素单击时隐藏iframe
- 按钮元素单击事件以切换类不起作用
