Question

您好我在隐藏它们后尝试获取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>

附加功能

使用IE时代码运行正常，但它不能在Chrome或Opera中运行（还没试过Firefox）。

我使用Dreamweaver和流畅的网格布局（不确定这是否会影响代码）

由于Dreamweaver我也使用预定义的boilerplate.css和respond.min.js

我也在使用jquery-1.10.2.js

以下是我的完整代码，如果它有用：

   <!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<!-- 
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build 
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="scripts/respond.min.js"></script>
<script src="scripts/jquery-1.10.2.js"></script>

<script>
$(function() {
    setInterval(function(){
    $("#underline").fadeTo(1500, 0.15);
    $("#underline").fadeTo(1500, 1);
    $("#bottomheader").fadeTo(1500, 0.15);
    $("#bottomheader").fadeTo(1500, 1);
    },3000);
}
);
</script>


<!--Control Red Section-->

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

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

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

});
</script>

<script>
function redlambolarge()
{
document.getElementById("largeimageredlambo").style.display = 'block'
document.getElementById("sections").style.display = 'none'
document.getElementById("bottomheader").style.marginTop = '3%'
}
</script>

<script>
function redlambolargeclose()
{
document.getElementById("largeimageredlambo").style.display = 'none'
document.getElementById("sections").style.display = 'block'
document.getElementById("bottomheader").style.marginTop = '0'
}
</script>

<!--Control Blue Section-->

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

$("#blueresize").click(function(){
    $("#blueresize").hide();
    $("#blueinfo").hide();
  });

 $("#expanddownblue").click(function(){
    $("#blueinfo").show();
    $("#blueresize").show();
  });

});
</script>

<script>
function bluelambolarge()
{
document.getElementById("largeimagebluelambo").style.display = 'block'
document.getElementById("sections").style.display = 'none'
document.getElementById("bottomheader").style.marginTop = '3%'
}
</script>

<script>
function bluelambolargeclose()
{
document.getElementById("largeimagebluelambo").style.display = 'none'
document.getElementById("sections").style.display = 'block'
document.getElementById("bottomheader").style.marginTop = '0%'
}
</script>

<!--Control orange Section-->

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

$("#orangeresize").click(function(){
    $("#orangeresize").hide();
    $("#orangeinfo").hide();
  });

 $("#expanddownorange").click(function(){
    $("#orangeinfo").show();
    $("#orangeresize").show();
  });

});
</script>

<script>
function orangelambolarge()
{
document.getElementById("largeimageorangelambo").style.display = 'block'
document.getElementById("sections").style.display = 'none'
document.getElementById("bottomheader").style.marginTop = '3%'
}
</script>

<script>
function orangelambolargeclose()
{
document.getElementById("largeimageorangelambo").style.display = 'none'
document.getElementById("sections").style.display = 'block'
document.getElementById("bottomheader").style.marginTop = '0'
}
</script>

<!--End of Scripts-->

</head>

<body background="images/background.jpg">

<div class="gridContainer clearfix">

  <div id="header">Super Cars</div>

  <div id="underline"></div>

  <div id="largeimages">  

    <div id="largeimageredlambo">
        <img src="images/redlambo.jpg">
        <input class="closelambo" type="button" onclick="redlambolargeclose()" value="Close">
    </div>

    <div id="largeimagebluelambo">
        <img src="images/bluelambo.jpg">  
        <input class="closelambo" type="button" onclick="bluelambolargeclose()" value="Close">
    </div>

    <div id="largeimageorangelambo">   
        <img src="images/orangelambo.jpg">
        <input class="closelambo" type="button" onclick="orangelambolargeclose()" value="Close">
    </div>  
  </div>

  <div id="sections">


    <div id="firstsection"> 
      <div id="firstsectiontitle">Red Lamborghini</div> 
        <a href="#" type= "button" onClick="redlambolarge()">
        <img src="images/redlambo.jpg">
        </a> 

      <div id="expanddownred">↓   Information   ↓</div>

      <div id="redinfo">
      <p>This is where the content for the lamborghini goes. This is where the content for the lamborghini goes. This is where the content for the lamborghini goes. This is where the content for the lamborghini goes. This is where the content for the lamborghini goes.</p>
      </div>

      <div id="redresize">↑  Close  ↑</div>

    </div>


    <div id="secondsection"> 
      <div id="secondsectiontitle">Blue Lamborghini</div>
        <a href="#" type= "button" onClick="bluelambolarge()">
        <img src="images/bluelambo.jpg">  
        </a>

      <div id="expanddownblue">↓   Information  ↓</div>

      <div id="blueinfo">
      <p>This is where the content for the lamborghini goes. This is where the content for the lamborghini goes. This is where the content for the lamborghini goes. This is where the content for the lamborghini goes. This is where the content for the lamborghini goes.</p>
      </div>

      <div id="blueresize">↑  Close  ↑</div>

    </div>


    <div id="thirdsection">
      <div id="thirdsectiontitle">Orange Lamborghini</div> 
        <a href="#" type= "button" onClick="orangelambolarge()">
        <img src="images/orangelambo.jpg">
        </a>

      <div id="expanddownorange">↓   Information  ↓</div>

      <div id="orangeinfo">
      <p>This is where the content for the lamborghini goes. This is where the content for the lamborghini goes. This is where the content for the lamborghini goes. This is where the content for the lamborghini goes. This is where the content for the lamborghini goes.</p>
      </div>

      <div id="orangeresize">↑  Close  ↑</div>

    </div>


  </div>

  <div id="bottomheader"></div>

</div>

</body>

</html>

如果有帮助，下面也是我的CSS代码：

@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%;
}
}

感谢您的光临

Answer 1

试试这个：

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

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

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

});

Answer 2

在稍微不同的情况下我也发生了同样的情况，但也许这对你有所帮助。

添加愚蠢的错误是chrome devs的一个坏习惯（更不用说他们不愿意纠正许多旧烦人的bug）。 Opera使用相同的引擎，顺便说一句。昨天我更新了chrome和每个带有标签的块，其中disblay：none-＆gt; display：block（在你的情况下是show（））是在文件准备好的情况下设置为零维度，因此是不可见的（即使没有溢出：隐藏其内容是不可见的）

有两种方法让事情按预期运作：
- 不要使用display：none;（即hide（））隐藏它，设置高度：0和溢出：隐藏
- 用0时间的setTimeout换行显示

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

2 个答案: