0
我的代碼有問題。CSS Responsive Jquery
我做了一個響應頁面，當我按下按鈕來顯示/隱藏div。 顯示div時，隱藏的內容不會出現在全角頁面上。 沒有jQuery它可以正常工作，但我需要顯示按鈕被按下時的信息div。
怎麼辦？
$(document).ready(function() {
$('#menu').click(function(e) {
\t \t if($('#menu').text() == "SHOW INFO")
\t \t {
\t \t \t $('#menu').text('HIDE INFO');
\t \t \t
\t \t \t $('#content').hide();
\t \t \t $('#info').show();
\t \t }
\t \t else
\t \t {
\t \t \t $('#menu').text('SHOW INFO');
\t \t \t $('#info').hide();
\t \t \t $('#content').show();
\t \t }
});
});html, body
{
\t margin: 0;
\t padding: 0;
\t height: 100%;
}
.wrapper
{
\t background-color:white;
\t width:100%;
\t height:100%;
}
.menu
{
\t display:none;
}
.content
{
\t vertical-align: top;
\t color:yellow;
\t background-color:black;
\t width:70%;
\t height:100%;
\t display: inline-block;
}
.info
{
\t z-index:9999;
\t background-color:white;
\t width:29%;
\t height:100%;
\t display: inline-block;
\t word-wrap:break-word;
}
.infobox
{
\t padding-left:30px;
\t padding-right:30px;
\t padding-top:30px;
\t text-align:justify;
}
.spacer
{
\t margin-top: 15px;
\t margin-bottom: 15px;
\t height:1px;
\t background-color:#D9D9D9;
}
.title
{
\t font-size:16;
\t font-family:Verdana;
}
.desc
{
\t font-size:12px;
\t font-family:Verdana;
}
@media only screen and (max-width: 700px)
{ \t
\t .content
\t {
\t \t background-color:black;
\t \t width:100%;
\t \t height:100%;
\t }
\t .info
\t {
\t \t z-index:9999;
\t \t width:100%;
\t \t display:none;
\t }
\t
\t .menu
\t {
\t \t display:block;
\t \t height:40px;
\t \t line-height: 40px;
\t \t font-family: Verdana;
\t \t font-weight: normal;
\t \t font-size: 18px;
\t \t color: #D00355;
\t \t position: relative;
\t \t text-align: center;
\t \t -webkit-user-select: none;
\t \t -moz-user-select: none;
\t \t -ms-user-select: none;
\t \t -o-user-select: none;
\t \t user-select: none;
\t \t -webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
\t }
\t
\t .menu:hover
\t {
\t \t background-color:#D00355;
\t \t -webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
\t \t line-height: 40px;
\t \t font-family: Verdana;
\t \t font-weight: normal;
\t \t font-size: 18px;
\t \t color: white;
\t \t position: relative;
\t \t text-align: center;
\t \t cursor:pointer;
\t }
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Responsive Test</title>
<meta name="viewport" content="width=device-width, minimumscale=1.0, maximum-scale=1.0" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div class="wrapper">
\t <div id="content" name="content" class="content">
\t \t 1
\t </div>
\t
\t <div id="info" name="info" class="info">
\t \t <div class="infobox">
\t \t <div class="title">Title</div>
\t \t <div class="spacer"></div>
\t \t <div class="desc">asdadadadaasdadadadaasdadadadaasdadadadaasdadadadaasdadadadaasdadadadaasdadadadaasdadadadaasdadadadaasdadadada</div>
\t \t </div>
\t </div>
\t
\t <div class="menu" id="menu" name="menu">SHOW INFO</div>
\t
</div>
</body>
</html>
無法理解你的問題，你能解釋你的問題嗎？ – Arjun 2015-04-04 11:29:15
http://jsfiddle.net/o37qrugw/看起來像你的代碼適合我。如果沒有，試着更好地解釋你的問題 – covfefe 2015-04-04 11:32:49
是的，代碼工作。問題出現時，我最小化窗口，我按顯示信息，信息div顯示，但是當我最大化窗口，內容div不顯示。 – ADrianC 2015-04-04 11:46:19