隐藏更高级别的 div

Question

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

我的 html 页面有一个 sn-p：

<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;
  });
});