如何在单个 div 中显示和隐藏元素？答案

【问题标题】：how to show and hide element inside a single div?如何在单个 div 中显示和隐藏元素？
【发布时间】：2013-12-11 18:47:44
【问题描述】：

我有一个奇怪的案例需要帮助。

我试图在用户单击按钮时隐藏和显示某些内容。

我的html

   <div class='slide-content'>
        <h1>Title</h1>
        <div class='title-bar'>
            sub title here
            <div class='edit-container'>
                <a class='edit' href='#'>Edit</a>
            </div>
        </div>
        <div id='content' class='details'>
            <div class='contents'>
                 <p>contents here</p>
            </div>
            <div class='break'></div>
        </div>
        <div id='edit-content' class='content-details'>
             <div class='contents'>
                <div class='editable-content'>
                    contents here…...                          
                </div>
            </div>             
            <div class='break'></div>
        </div>
    </div>

    <div class='slide-content'>
     …...

另外 10 个幻灯片内容 div……

jquery

   $('.edit').on('click', function(e){
       e.stopPropagation();
       if($(this).text()=='Edit'){
           $(this).text('Done');
           $(this).closest('.slide-content').find($('.content-details')).show();
           $(this).closest('.slide-content').find($('.details')).hide();
       }else{
           $(this).text('Edit');
           $(this).closest('.slide-content').find($('.content-details')).hide();
           $(this).closest('.slide-content').find($('.details').show());
       }
   })
});

css

.content-details{
  display:none;
}

我的问题是，当我第一次单击edit 按钮时，它会显示我的.content-details 并隐藏.detail div。但是，当我再次单击edit 按钮时，它会显示我页面中的每个.details div（即使它位于不同的.slide-content div 下）。我的意图是在当前.slide-content. 下仅显示 1 个.detail div

我不确定这里发生了什么。谁能帮我解决这个问题？非常感谢！

【问题讨论】：

标签： jquery html css

【解决方案1】：

您没有正确关闭括号：

$(this).closest('.slide-content').find($('.details').show());

为了更清楚地看到问题：

$(this).closest('.slide-content').find(
    $('.details').show()
);

所以你明确地调用$('.details').show()。

你想要这个：

$(this).closest('.slide-content').find($('.details')).show();

但实际上，find() 不需要 jquery 对象，所以这也同样有效（此处以及您正在使用此模式的其他地方）：

$(this).closest('.slide-content').find('.details').show();

另外，作为最后一点，我认为简化代码并使用一点缓存会很好：

$('.edit').on('click', function (e) {
    e.stopPropagation();
    var $this = $(this);
    $this.text($this.text() == 'Edit' ? 'Done' : 'Edit');
    $this.closest('.slide-content').find('.content-details, .details').toggle();
});

【讨论】：

【解决方案2】：

其实这就是你所需要的：http://jsbin.com/IsUQaJA/1/edit

$('.edit').on('click', function(e){
       e.preventDefault();   
       var txt = $(this).text();
       $(this).text(txt=='Edit'?'Done':'Edit').closest('.slide-content')
              .find('.details, .content-details').toggle();
});

【讨论】：