使用javascript/jquery（Google Chrome）隐藏元素后无法显示它们

你好，我有问题试图得到2个div标签显示后隐藏他们

我尝试将jquery与.hide（）和.show（）命令一起使用，还尝试了使用styles.display='none'/'block'的纯JavaScript

但是，如果我隐藏了div标记，我就无法让它们再次显示

下面是我目前正在尝试使用的代码：

    <script>
    $(document).ready(function(){

     $("#redresize").click(function(){
        $("#redresize").hide();
        $("#redinfo").hide();
      });

     $("#expanddownred").click(function(){
        $("#redinfo").show();
        $("#redresize").show();
      });

    });
    </script>

感谢您的关注

试试这个：

<script>
$(document).ready(function(){

 $("#redresize").click(function(){
    $("#redresize").css('display','none');
    $("#redinfo").css('display','none');
  });

 $("#expanddownred").click(function(){
    $("#redinfo").css('display','');
    $("#redresize").css('display','');
  });

});  

$（文档）.ready（函数（）{
$（“#redresize”）。单击（函数（）{
$（“#redresize”）.css（'display'，'none'）；
$（“#redinfo”）.css（'display'，'none'）；
});
$（“#expanddownred”）。单击（函数（）{
$（“#redinfo”）.css（'显示'，''）；
$（“#redresize”）.css（'显示'，''）；
});
});  

同样的情况也发生在我身上，但条件稍有不同，但这可能会对你有所帮助

添加愚蠢的bug是chrome开发者的一个坏习惯（更不用说他们不愿意纠正许多讨厌的老bug了）。顺便说一句，Opera使用相同的引擎。 昨天我更新了chrome和每个块，每个块都有选项卡，其中display:none->display:block（在您的例子中是show（））是在文档上设置的，可以呈现为零维，因此是不可见的（即使没有溢出：隐藏它的内容是不可见的）

有两种方法可以让事情按预期进行：
-不使用显示：无；（即隐藏（））隐藏它，设置高度：0和溢出：隐藏

---

-使用setTimeout和0 time包装显示

读取代码非常困难。缩进代码是一种很好的做法。您是否尝试过使用chrome调试器查看那里的代码是否执行过？不确定调试器是什么，但是代码似乎在inspect element视图中被激活并在chrome上正常运行，但是这些更改似乎对在浏览器中运行的实际站点没有任何影响浏览器。很抱歉代码很难阅读（仍在学习中），感谢您提供有关缩进的提示。非常感谢您的回答。不幸的是，它不起作用：（我似乎只是在Chrome和Opera中遇到了麻烦（在IE中工作）

@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

/*
    Dreamweaver Fluid Grid Properties
    ----------------------------------
    dw-num-cols-mobile:     6;
    dw-num-cols-tablet:     12;
    dw-num-cols-desktop:    18;
    dw-gutter-percentage:   15;

    Inspiration from "Responsive Web Design" by Ethan Marcotte 
    http://www.alistapart.com/articles/responsive-web-design

    and Golden Grid System by Joni Korpi
    http://goldengridsystem.com/
*/

body {
    background-color:#999;
}

#largeimageredlambo,
#largeimagebluelambo,
#largeimageorangelambo {
    display:none;
}

/* Mobile Layout: 480px and below. */

.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 88.0434%;
    padding-left: 0.9782%;
    padding-right: 0.9782%;
}

#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    text-align:center;
    font-size:36px;
    border-top-left-radius:40px 40px;
    border-top-right-radius:40px 40px;
    background-color: rgba(255, 255, 255, 0.8);
    /*-moz-border-radius:40px 40px ;
    -webkit-border-radius:40px 40px ;*/

}
#underline,
#bottomheader {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    height: 4px;
    display: block;
    background-color: #F00;
    margin-bottom:3%;
    border:thick 2px;
    border-bottom-style:solid;
    border-radius: 80px / 20px;
    -moz-border-radius: 20px ;
    -webkit-border-radius: 20px ;
}
#firstsection,
#secondsection,
#thirdsection {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    margin-bottom: 3%;
}
#firstsectiontitle,
#secondsectiontitle,
#thirdsectiontitle {
    text-align:center;
    font-size:24px;
    background-color:rgba(51,204,102,0.6);
    border-top-left-radius:30px 30px;
    border-top-right-radius:30px 30px;
    /*-moz-border-radius:30px 30px ;
    -webkit-border-radius:30px 30px ;*/
}
#firstsectiontitle:hover,
#secondsectiontitle:hover,
#thirdsectiontitle:hover {
    background-color:rgba(51,255,102,0.6)
}
.closelambo {
    font-size:14px;
    margin-left:40%;
    width:20%;
}
#expanddownred,
#expanddownblue,
#expanddownorange {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    text-align:center;
    font-size:20px;
    background-color:rgba(51,204,102,0.6);
}
#redinfo,
#blueinfo,
#orangeinfo {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    text-align:center;
    background-color:#FFF;
    display:none;
}
#orangeresize,
#blueresize,
#redresize {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    background-color:rgba(51,204,102,0.6);
    border-bottom-left-radius:30px 30px;
    border-bottom-right-radius:30px 30px;
    text-align:center;
    font-size:20px;
    display:none;
}


/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.gridContainer {
    width: 89.0217%;
    padding-left: 0.4891%;
    padding-right: 0.4891%;
}
.closelambo {
    font-size:18px;
}
#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#Underline,
#bottomheader {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#firstsection{
    clear: none;
    float: left;
    margin-left: 0;
    width: 49.4505%;
    display: block;
}
#secondsection {
    clear: none;
    float: left;
    margin-left: 1.0989%;
    width: 49.4505%;
    display: block;
    margin-top:0%;
}
#thirdsection {
    clear: none;
    float: left;
    margin-left: 25%;
    width: 49.4505%;
    display: block;
    margin-top:0%;
}
#expanddownred,
#expanddownblue,
#expanddownorange {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#redinfo,
#blueinfo,
#orangeinfo {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
}
#orangeresize,
#blueresize,
#redresize {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
    width: 89.3478%;
    max-width: 1232px;
    padding-left: 0.326%;
    padding-right: 0.326%;
    margin: auto;
}
.closelambo {
    font-size:18px;
}
#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#Underline,
#bottomheader {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#firstsection{
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.8467%;
    display: block;
    margin-top:0%;
}
#secondsection,
#thirdsection{
    clear: none;
    float: left;
    margin-left: 0.7299%;
    width: 32.8467%;
    display: block;
    margin-top:0%;
}
#expanddownred,
#expanddownblue,
#expanddownorange {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#redinfo,
#blueinfo,
#orangeinfo {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
}
#orangeresize,
#blueresize,
#redresize {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
}
}

<script>
$(document).ready(function(){

 $("#redresize").click(function(){
    $("#redresize").css('display','none');
    $("#redinfo").css('display','none');
  });

 $("#expanddownred").click(function(){
    $("#redinfo").css('display','');
    $("#redresize").css('display','');
  });

});