[英]Display div below clickable link
I have the following: 我有以下内容:
<a class="noteLink">Note Name</a>
<div class="note">Full Note Details</div>
<a class="noteLink">Note Name</a>
<div class="note">Full Note Details</div>
<a class="noteLink">Note Name</a>
<div class="note">Full Note Details</div>
Where all the "note" divs are hidden by default , I'd like to show the one that relates to the button
that is clicked when it's clicked. 默认情况下 ,所有“ note” div都是隐藏的 ,我想显示一个与单击
button
有关的按钮。
Is there an easier way than something like: 有没有比以下更简单的方法:
$('#UniqueNoteLink').click(function() {
$('#UniqueNoteID').toggle();
});
For each note? 对于每个音符?
If the element you want to toggle comes right after the clicked element, you could just use next()
如果要切换的元素紧接在单击元素之后,则可以使用
next()
$('.noteLink').click(function() { $(this).next().toggle(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="noteLink">Note Name</a> <div class="note">Full Note Details</div> <a class="noteLink">Note Name</a> <div class="note">Full Note Details</div> <a class="noteLink">Note Name</a> <div class="note">Full Note Details</div>
Yes, using classes. 是的,使用类。
$(function () { $(".note").hide(); $(".noteLink").click(function () { $(this).next().slideToggle(); }); });
a {cursor: pointer; display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="noteLink">Note Name</a> <div class="note">Full Note Details</div> <a class="noteLink">Note Name</a> <div class="note">Full Note Details</div> <a class="noteLink">Note Name</a> <div class="note">Full Note Details</div>
.clickables{
border:1px solid #999999;
}
.deepclickables{
margin:5px;
border:1px dotted #999999;
}
<div class="clickables">
<span onClick="javascript:clickables()">Clickables</span>
<div id="clicka" class="deepclickables">
</div>
</div>
<script>
function clickables(){
document.getElementById('clicka').innerHTML = "Yo yo yo"
}
</script>
or 要么
function clickable(){
document.getElementById('clickable').innerHTML = "content";
}
Use onClick to call it
<div id="click" onClick="javascript:clickable();">Click me!</div>
Using .next()
would be the ideal solution. 使用
.next()
将是理想的解决方案。 But if you are able to wrap your .note
and .noteLink
into a label
tag with a checkbox, you may not need javescript to do this trick. 但是,如果你能来包装你
.note
和.noteLink
成label
有一个复选框标签,你可能不需要javescript做这一招。 Here is an example: 这是一个例子:
input, .note { display: none; } label, input:checked ~ div { display:block; }
<label> <input type=checkbox> <a class="noteLink">Note Name</a> <div class="note">Full Note Details</div> </label> <label> <input type=checkbox> <a class="noteLink">Note Name</a> <div class="note">Full Note Details</div> </label> <label> <input type=checkbox> <a class="noteLink">Note Name</a> <div class="note">Full Note Details</div> </label>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.