javascript - 隐藏更高级别的 div

Question

在屏幕左侧有一个索引。如果您单击该索引的某个项目，它将在页面右侧显示内容。如果单击多个索引项，将显示属于这些索引的所有信息。这对用户来说可能有点难以承受，所以我希望用户能够关闭右侧的一些部分。因此，我向右侧显示的每个部分添加了一个按钮。不幸的是它没有按预期工作。

我有一个 html 页面的片段:

<div class="col-md-8">
 <div class="panel panel-default" id="SUPL106">
   <div class="close-btn-panel">
     <button type="button" class="close-btn" id="close-btn-SUPL106" aria-hidden="true"></button>
   </div>     
   <div class="panel-heading"><h3>header</h3></div>
   <div class="panel-body" >
     <pre>some-text.</pre>
   </div>
  <h3 class="bg-primary"> <img src="cucumber-logo.png" width="32" height="30">Sub Header</h3>
  <p> Some more text here</p> 
</div>
<div class="panel panel-default" id="SUPL106" style="display: none;"></div>
<div class="panel panel-default" id="SUPL106_1"></div>
<div class="panel panel-default" id="SUPL106_1" style="display: none;"></div>
<div class="panel panel-default" id="SUPL106_2"></div>
<div class="panel panel-default" id="SUPL106_2" style="display: none;"></div>
...

当点击按钮时，我想关闭 ID 为 SUPL106 的父 div。棘手的部分是我在每个 div 中有一个这样的按钮，如下所示:

<div class="panel panel-default" id="SUPL106">

其中 id 具有不同的唯一值。

我创建了一个 javascript/jquery 函数来处理按钮上的点击。脚本是:

$(document).ready(function () {
  $( 'button.close-btn' ).click(function() {
    var container = $('this').closest('div').closest('div');
    if(container.eq( $('.panel-default'))) {
        $(container).toggle(200);
        alert("hello");
    }
    return false;
  });
}); 

这个 javascript 向我显示了警报，所以我认为它应该可以工作。虽然div并没有隐藏自己。问题是，如果我将 eq() 中的值更改为完全愚蠢的值，它仍然会向我显示警报。

我已经为此工作了几天，但似乎找不到合适的解决方案。

有什么建议吗？

Answer 1

删除重复的 ID 以获得有效的 HTML 标记...那么它应该是:

$(document).ready(function () {
  $( 'button.close-btn' ).click(function() {
    $(this).closest('.panel-default').toggle(200);
    return false;
  });
});