Question

我有一个很好的小节目，一次只有一个div工作，我发现： Random Snippets（第二次演示）看起来像这样：

function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
}

它唯一不做的就是打开它后关闭div。目前我将两个div设置为display：none，并且希望在完成查看时为用户提供关闭它们的选项。

有任何想法如何修改？

Answer 1

您可以点击一下，点击它时关闭它们：

$('.newboxes').click( function() {
    $(this).hide(600);
});

Answer 2

您必须向用户提供按钮或其他内容才能关闭div。我们假设每个div中都有一个这样的按钮：

HTML

<div class="div-class">
    <p>Box content</p>
    <button class="close">Close</button>
</div>

的jQuery

$('.close').on('click', function() {
   $(this).closest('.div-class').hide();
});

Answer 3

在if语句中添加有关当前项目可见性的条件：

function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone && $(this).css("display") == "none") {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
}

修改脚本以关闭Div

3 个答案: