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 Example

Answer 2

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

查看我用你的代码做的这个jsfiddle

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

Answer 3

您可以使用事件属性#headerButton获取当前currentTarget。然后你可以得到按钮，如果它被隐藏显示它。

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

button{
    display: hidden;
}

为了更好的做法，请改用<button>。

点击手风琴标题上的按钮时显示/隐藏按钮 - jQuery

3 个答案: