Обновление
Используйте эту функцию JQuery
$(document).ready(function() {
$(".toggleOne").click(function() {
$(this).parent().parent().parent().children(".oneContent").slideToggle("slow");
});
});
У меня есть 3 деления с 1 неупорядоченным списком и 1 делением каждый. Я пытаюсь реализовать функцию JQuery так, чтобы всякий раз, когда я нажимал кнопку (с классом toggleOne), div (с классом oneContent), связанный с этим div, был виден и скользил вниз. Но моя реализация не работает. Помощь будет оценена.
JQuery
<script>
$(document).ready(function() {
$(".toggleOne").click(function() {
$(".oneContent").slideToggle("slow");
});
});
</script>
HTML
<div class="oneDiv">
<ul class="oneList">
<li class="oneList_item">
<h3>ABC</h3>
</li>
<li class="oneList_item">
<button onClick={this.handleChange} class="toggleOne">
Click Here
</button>
<br />
<br />
</li>
</ul>
<div class="oneContent">
<h3>Hello World</h3>
</div>
</div>
<div class="oneDiv">
<ul class="oneList">
<li class="oneList_item">
<h3>ABC</h3>
</li>
<li class="oneList_item">
<button onClick={this.handleChange} class="toggleOne">
Click Here
</button>
<br />
<br />
</li>
</ul>
<div class="oneContent">
<h3>Hello World</h3>
</div>
</div>
<div class="oneDiv">
<ul class="oneList">
<li class="oneList_item">
<h3>ABC</h3>
</li>
<li class="oneList_item">
<button onClick={this.handleChange} class="toggleOne">
Click Here
</button>
<br />
<br />
</li>
</ul>
<div class="oneContent">
<h3>Hello World</h3>
</div>
</div>
CSS
.oneContent {
display: none;
}