javascript - 隐藏 div 中的所有元素，除了单击标签以在背景中显示 div

Question

我有两个 div。 dvMapContainer 用作整页背景并显示传单 map ，dvEditContainer 在 map 顶部覆盖带有一些控件的 div。

代码是这样的:

<div id="dvMapContainer" style="height: 93%; width: 100%;position: absolute; top: 0; left: 0;"></div>

<div class="container" id="dvEditContainer">
    <div class="container-header">Update Inventory</div>
<div class="col-sm-4">

    <div class="form-group">
        <label for="plateNumber" class="col-sm-5 control-label">Plate #:</label>
        <div class="col-sm-7">
            <input type="text"
                   data-ng-model="bb.plateNumber"
                   name="plateNumber"
                   id="plateNumber"
                   class="form-control"/>
        </div>
    </div> 
 </div> 

我想要发生的是，当用户单击标签“Plate #”时，它将隐藏整个 dvEditContainer，但按原样显示标签。当用户再次点击标签时，dvEditContainer 将再次可见。

我的 jquery 代码如下所示:

$(document).ready(function () {
            $('label').click(function (e) {
                var target = $(e.target);
                console.log(target);
                $('#dvEditContainer').hide();
                $(target).show();
            });
        });

然而，这会按预期隐藏 dvEditContainer，但也不显示标签。

任何想法或提示将不胜感激。

jsfiddle非工作代码。

Answer 1

由于标签位于 dvEditContainer div 内的 div 内，因此它也被隐藏了。

将表单组 div 移到 dvEditContainer 之外。