javascript - 使用 javascript/jquery (Google Chrome) 隐藏元素后无法显示元素

Question

您好，我在隐藏 2 个 div 标签后尝试显示它们时遇到问题。

我尝试使用带有 .hide() 和 .show() 命令的 jquery 以及使用 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   ↓&lt;/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  ↑&lt;/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  ↓&lt;/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  ↑&lt;/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  ↓&lt;/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  ↑&lt;/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%;
}
}

谢谢你看

score 0 · Accepted Answer

在稍微不同的条件下，我也遇到了同样的情况，但也许这会对你有所帮助。

添加愚蠢的错误是 chrome 开发人员的一个坏习惯（更不用说他们不愿意纠正许多旧的烦人的错误）。Opera 使用相同的引擎，顺便说一句。昨天我更新了 chrome 和每个带有选项卡的块，其中 disblay:none->display:block （在你的情况下为 show() ）设置在文档准备好以零尺寸呈现，因此不可见（即使没有溢出：隐藏它的内容是不可见的）。

有两种方法可以让事情按预期工作：
- 不要使用 display:none;(ie hide()) 隐藏它，设置 height:0 和 overflow:hidden
- 用 setTimeout 包装显示，时间为 0

score 0 · Accepted Answer

尝试这个：

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

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

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

});

javascript - 使用 javascript/jquery (Google Chrome) 隐藏元素后无法显示元素

2 回答 2

Related

Reference