Question

我从jsfiddle分发了这个脚本，用于我正在制作的联系页面。问题是：我无法弄清楚如何显示嵌套的div，这是我将要使用的短代码所必需的。

在我的例子中，我创建了一个名为“我需要被人看到！”的ID。我想在用户点击面部时看到弹出窗口 - JSFiddle

这是我正在使用的jQuery脚本：

$(document).ready(function(){
  $("#upload_page a").click(function(){
     var id =  $(this).attr('id');
     id = id.split('_');
     $(this).addClass('selected').siblings().removeClass('selected');
     $("#upload_container div").hide();
     $("#upload_container #upload_"+id[1]).show();
  });
});

谢谢！

Answer 1

问题是选择器#upload_container div将样式和操作应用于upload_container内的所有div，而是需要将其限制为upload_container

的子项

所以

#upload_container > div {
    display:none;
}

然后

$(document).ready(function () {
    $("#upload_page a").click(function () {
        var id = $(this).attr('id');
        id = id.split('_');
        $(this).addClass('selected').siblings().removeClass('selected');
        $("#upload_container > div").hide();
        $("#upload_container #upload_" + id[1]).show();
    });
});

演示：Fiddle

另一种解决方案是添加一个类来定位upload_*元素，如

    <div id="upload_bob9" class="upload"> Some Text 9
        <div class="nested_div">I need to be seen!</div>
    </div>

然后

#upload_container .upload {
    display:none;
}

和

$(document).ready(function () {
    $("#upload_page a").click(function () {
        var id = $(this).attr('id');
        id = id.split('_');
        $(this).addClass('selected').siblings().removeClass('selected');
        $("#upload_container .upload").hide();
        $("#upload_container #upload_" + id[1]).show();
    });
});

演示：Fiddle

注意：元素的ID必须是唯一的，因此请使用nested_div的属性

Answer 2

写：

$("#upload_page a").click(function(){
    var id =  $(this).attr('id');
    id = id.split('_');
    $(this).addClass('selected').siblings().removeClass('selected');
    $("#upload_container div").hide(); 
    $("#upload_container #upload_"+id[1]+",#upload_container #upload_"+id[1]+" *").show();
});

DEMO

OR：

为所有上传div添加一个类并隐藏它们，而不是隐藏所有div元素。

$("#upload_page a").click(function(){
    var id =  $(this).attr('id');
    id = id.split('_');
    $(this).addClass('selected').siblings().removeClass('selected');
    $("#upload_container .container").hide(); 
    $("#upload_container #upload_"+id[1]).show();
});

DEMO

Answer 3

在代码中添加此行$("#upload_container #upload_"+id[1]).find('div').show();

$(document).ready(function(){
   $("#upload_page a").click(function(){
      var id =  $(this).attr('id');
      id = id.split('_');
      $(this).addClass('selected').siblings().removeClass('selected');
      $("#upload_container div").hide(); 
      $("#upload_container #upload_"+id[1]).show();
      $("#upload_container #upload_"+id[1]).find('div').show();
   });
});

FIDDLE 希望它有所帮助。

jQuery切换显示/隐藏，如何显示嵌套的div

3 个答案: