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>
...

当clikcing按钮时，我想关闭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;
  });
});

隐藏div更高一些级别

1 个答案: