基本的JavaScript按钮功能(隐藏/显示内容)

Question

首先，我不擅长这个，我发现了类似的问题和答案，但这些最终并没有让我能够解决我自己的问题。

我的问题如下：单击时会显示一个包含内容的div 的按钮。 我得到的最接近的是仅使用 html 和 css，单击按钮将导致隐藏自己的div 并显示其他div(基本上与我想要实现的目标完全相反(。在我恢复了html/css的"感觉"之后，我开始使用javascript并重写东西。

结果是：(html(

$(document).ready(function () {
$("#button").click(function (){
var target = '#' + $(this).data('target');
$("#hidden-div").slideUp()
$(target).slideDown()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main" id="main">
<section class="listview">
<h1 class="title">List of functions used on the page</h1>
<ul class ="list" id="list">
<li>Splash page.
<button class="btn-list" data-target="splash-div" id="splash-btn">Explanation</button><br>
<div class="hidden-div" id="splash-div">blablabla</div><br>
<a class="listlink" href="#splash">Take me there!</a></li>
<li>Interactive list.
<button class="btn-list" data-target="list-div" id="list-btn">Explanation</button><br>
<div class="hidden-div" id="list-div">blablabla</div><br>
<a class="listlink" href="#list">Take me there!</a></li>
</ul>
</section>
</div>

编辑的代码。

我尝试过.css(而不是显示(，首先尝试隐藏的真/假，然后内容：无/阻止。

内容无/块是我如何在不使用javascript的情况下使其"工作"的方式。

我错过了一些明显的东西吗？还是我尝试使用错误的函数？

Answer 1

根据您的要求，我更新了您的Q结构并应用了适合您情况的功能。如果这不是您想要的，请发表评论，我将根据您的需要对其进行重组并回答。希望这有帮助！

为您更新了代码

$(document).ready(function() {
$("body").on('click', '.btn-list', function() {
$(".hidden-div").hide();
$(this).closest(".hideClass").find(".hidden-div").show();
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main" id="main">
<section class="listview">
<h1 class="title">List of functions used on the page</h1>
<ul class="list" id="list">
<li class="hideClass">
<p>Splash page1.</p>
<button class="btn-list" data-target="#splash-div" id="splash-btn">Show me more</button><br>
<div class="hidden-div" id="splash-div">blablabla</div>
<a class="listlink" href="#splash">Take me there!</a>
</li>
<li class="hideClass">
<p>Splash page2.</p>
<button class="btn-list" data-target="#list-div" id="list-btn">Show me more</button><br>
<div class="hidden-div" id="list-div">blablabla</div>
<a class="listlink" href="#list">Take me there!</a>
</li>
<li class="hideClass">
<p>Splash page3.</p>
<button class="btn-list" data-target="#list-div" id="list-btn">Show me more</button><br>
<div class="hidden-div" id="list-div">blablabla</div>
<a class="listlink" href="#list">Take me there!</a>
</li>
<li class="hideClass">
<p>Splash page4.</p>
<button class="btn-list" data-target="#list-div" id="list-btn">Show me more</button><br>
<div class="hidden-div" id="list-div">blablabla</div>
<a class="listlink" href="#list">Take me there!</a>
</li>
<li class="hideClass">
<p>Splash page5.</p>
<button class="btn-list" data-target="#list-div" id="list-btn">Show me more</button><br>
<div class="hidden-div" id="list-div">blablabla</div>
<a class="listlink" href="#list">Take me there!</a>
</li>
</ul>
</section>
</div>

Answer 2

看看这个，应该可以解决你的问题。

$(document).ready(function() {
$("#splash-btn").click(function() {
$("#splash-div").show();
});

$("#list-btn").click(function() {
$("#list-div").show();
});
});

.hidden-div {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main" id="main">
<section class="listview">
<h1 class="title">List of functions used on the page</h1>
<ul class="list" id="list">
<li>Splash page.</li>
<button class="btn-list" id="splash-btn">Show me more</button><br>
<div class="hidden-div" id="splash-div">blablabla</div>
<button class="btn-list" id="list-btn">Show me more</button><br>
<div class="hidden-div" id="list-div">blablabla</div>
</ul>
</section>
</div>

Answer 3

$(document).ready(function() {
$("button").on('click',function() {
debugger;
var selecteddiv = $(this).attr("id") + '-div';
$("#"+selecteddiv).toggle();
});
});

.hidden-div {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main" id="main">
<section class="listview">
<h1 class="title">List of functions used on the page</h1>
<ul class="list" id="list">
<li>Splash page.</li>
<button class="btn-list" id="splash">Show / Hide</button><br>
<div class="hidden-div" id="splash-div">blablabla</div>
<button class="btn-list" id="list">Show / Hide</button><br>
<div class="hidden-div" id="list-div">sdfsdfsdfsdf</div>
</ul>
</section>
</div>