jQuery Div inside Div

jQuery Div inside Div

本文关键字：Div inside jQuery      更新时间：2023-09-26

我正在尝试用jQuery显示一个照片库。这是我的代码：

<script>
      $("#vsetky").click(function(){
  $("#obrazky").show();
}); 
      $("#c").click(function(){
  $("#cervene").show();
});
</script> 
<div id="obrazky">
  <div id="cervene">
    <img src="1.png">
    <img src="1.png">
  </div>
  <div id="zlte">
    <img src="2.png">
    <img src="2.png">
  </div>
  <div id="zelene">
    <img src="3.png">
    <img src="3.png">
  </div> 
</div>

单击#vsetky元素时。。。它工作，每一张图片都显示出来。单击#c元素时，没有任何图片。我试着用

 $("#obrazky > #cervene").show();

我试过其他方法，但都没用。请帮帮我——我做错了什么？

你的css是什么样子的？如果#obrazky和#cervene都有display:none，那么当你点击#c时，你只是从#cervenne中删除了display:nnone规则，而不是它的父包装div#obrazzy。

编辑：您需要将css更改为隐藏#cervene、#zlte和#zelene，然后使用javascript分别显示和隐藏它们。如果元素的父元素具有display:none，那么用javascript对其进行"show（）"操作不会有任何作用，因为您没有从父元素中删除display:nnone。

<script>
    $("#vsetky").click(function(){
        $("#cervene, #zlte, #zelene").show();
    }); 
    $("#c").click(function(){
        $("#cervene").show();
    });
</script> 
<style>
    #obrazky {display:inline-block;}
    #cervene, #zlte, #zelene {display:none;}
</style>
<div id="obrazky">
    <div id="cervene">
        <img src="1.png">
        <img src="1.png">
    </div>
    <div id="zlte">
        <img src="2.png">
        <img src="2.png">
    </div>
    <div id="zelene">
        <img src="3.png">
        <img src="3.png">
    </div> 
</div>
相关文章：