Javascript 单击accordion标题上的按钮时显示/隐藏按钮-jQuery

我在accordion标题上有一个按钮，当它被单击时，我想在div中显示另一个按钮

<div "accordion">
<h3>
     <input type="button" id="headerButton1" value="Random"/>
</h3>
<div>
     <input type="button" id="divButton1" value="Random1"/>
     <p>This is the first paragraph</p>
</div>

<h3>
     <input type="button" id="headerButton2" value="Random"/>
</h3>
<div>
     <input type="button" id="divButton2" value="Random2"/>
     <p>This is the second paragraph</p>
</div>

<h3>
     <input type="button" id="headerButton3" value="Random"/>
</h3>
<div>
     <input type="button" id="divButton3" value="Random3"/>
     <p>This is the third paragraph</p>
</div>
</div>

这是第一段

这是第二段

这是第三段

单击相应的“标题”按钮时，如何显示/隐藏“div”按钮

---

非常感谢您的帮助

您可以使用事件属性

currentTarget

获取当前的

#headerButton

。然后你可以得到按钮，如果它是隐藏的显示它

不要忘记使用css隐藏所有按钮实例：

button{
    display: hidden;
}

---

为了更好地练习，请改用

。

这将切换父级下一个同级项下按钮的可见性：

$("h3 input[type='button']").click(function () {
    $(this).parent().next().find("input[type='button']").toggle();
});

签出我对代码所做的这个JSFIDLE

jQuery具有内置的hide（）和show（）方法，您可以将它们包含在一个函数中，该函数在单击每个按钮时运行/

$(document).ready(function () {
    $('#headerButton1').click(function(event) {
        $('#divButton1').fadeIn('slow');
    });
});