如何使用 jQuery 实现百叶窗切换效果

Question

我正在尝试编写一个“百叶窗”函数，该函数将在 display:none 模式下关闭 DIV。看不见的 DIV 位于更宽的 DIV 内，包含盲触发器。

这个：

$(document).ready(function () {
    $("#toggle_blind").click(function () {
        $(this).toggle("fast");
    });
});

嗯，这会使按钮失明。如何将 DIV 添加到 $this？比如：

<div id="blind" class="wider_div">
   <h3 id="closeButton">Close</h3>
   <div style="display:none;" id="closeThis">
       <p>some text</p>
   </div>
</div>

如何使 H3 上的关闭按钮在每次点击时关闭/打开 CloseButton DIV？

Answer 1

div 是 h3 的下一个兄弟，所以你可以使用 .next()

例如

$('#closeButton').click( function(){
  $(this).next().toggle();
});

Answer 2

直接引用 div，你可以在它和 h3 之间放些别的东西。

$(document).ready(function()
{
    $("#closeButton").click(function()
    {
        $("#closeThis").toggle("fast");
    });
});