在可点击链接下方显示div

Question

我有以下内容：

<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>

所有＆＃34;注意＆＃34; div在默认情况下隐藏，我希望显示与点击时点击的button相关的内容。

是否有比以下更简单的方法：

$('#UniqueNoteLink').click(function() {
    $('#UniqueNoteID').toggle();
});

对于每个音符？

Answer 1

如果要切换的元素紧跟在单击的元素之后，您可以使用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>

Answer 2

是的，使用课程。

$(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>

Answer 3

.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>

或

function clickable(){
    document.getElementById('clickable').innerHTML = "content";
}
Use onClick to call it

<div id="click" onClick="javascript:clickable();">Click me!</div>

Answer 4

使用.next()将是理想的解决方案。但是，如果您能够将.note和.noteLink打包成带有复选框的label标记，则可能不需要javescript来执行此操作。这是一个例子：

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>