Anzeige div unter klickbaren Link

Question

Ich habe folgendes:

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

Wo alle „note“ divs standardmäßig ausgeblendet sind, würde Ich mag die zeigen, die auf die button bezieht sich auf die geklickt wird wenn es angeklickt wird.

Gibt es einen einfacheren Weg, als so etwas wie:

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

Für jede Note?

Answer 1

Wenn das Element, das Sie kommt direkt nach dem angeklickten Element wechseln möchten, können Sie einfach next() verwenden

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

Ja, mit Klassen.

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

oder

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

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

Answer 4

.next() Verwendung wäre die ideale Lösung sein. Aber wenn Sie in der Lage sind, Ihre .note und .noteLink in ein label Tag mit einem Kontrollkästchen zu wickeln, benötigen Sie möglicherweise Javescript, um diesen Trick zu tun. Hier ein Beispiel:

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>