单击手风琴头上的按钮时显示/隐藏按钮-jQuery

Question

我在手风琴标题上有一个按钮，当单击它时，我想在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>

单击相应的#headerButton部分时，如何显示/隐藏#divButton？

任何帮助，不胜感激！

Answer 1

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

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

jsFiddle示例

Answer 2

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

签出我对您的代码所做的jsfiddle

http://jsfiddle.net/aguilar1181/eayj75zz/1/

Answer 3

您可以使用事件属性currentTarget获得当前的#headerButton 。 然后，您可以获取该按钮（如果已隐藏）显示它。

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

button{
    display: hidden;
}

为了更好的实践，请使用<button> 。