-1
我想弄清楚的是如何让桌面上显示的两件事消失在手机中。现在发生的事情是，我的代码有两个方面：图像类和桌面上的类标题类，以及隐藏的内容（用户需要点击的内容）是对项目的描述。我的桌面版本是完美的，我想如何，但我遇到的唯一问题是，在移动中，我只想显示项目的描述，而不是之前的两个可单击的步骤。我知道这与显示有关：无;或显示属性的组合，但我一直在尝试似乎没有工作。显示没有移动和桌面问题
我不知道如何把它放在一个片段或一个小提琴中，因为有多个HTML页面以及一个JSON文件。所以在这种情况下，我会链接到一个网址，以便它可以访问。
如果这没有任何意义，或者你需要我澄清我会更乐意！我真的可以使用一些帮助，所以如果有人有一个想法如何解决这个问题，将不胜感激！谢谢。
http://sws.mnstate.edu/ry6750sm/data-proj/education2.html
这里是education.html：
\t <body>
\t <hr class="hr2">
<section id="content">
<div id="container">
<h2 >Class Projects</h2>
<div id="movecontainer">
<div id="move">
<div class="third ">
<div id="classes"><!--was event -->
<a id="GDES203" href="GDES203.html" ><img src="img/circlecircle.png" alt="GDES203" />GDES203</a>
<a id="gcom355" href="gcom355.html" ><img src="img/circlecircle.png" alt="GCOM355" />GCOM355</a>
<a id="COM230" href="COM230.html" ><img src="img/circlecircle.png" alt="COM230" />COM230</a>
</div>
</div>
<div class="third ">
<div id="projects"><!--was sessions -->
<p>Select a class</p>
</div>
</div>
<div class="third">
<div id="details"></div>
</div>
</div>
\t \t </div>
</div><!-- #container -->
</section><!-- #content -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/gcomclasses.js"></script>
\t
\t
</body>下面是描述HTML：
<body>
<header>
</header>
<div id="Fender-Guitar" class="flex-item">
<h3>Fender Stratocaster Electric Guitar</h3>
<a href="three-projects/int-com-graph/guitar2.png"><img alt="company logo" src="three-projects/int-com-graph/guitar2.png" height="150"/></a>
<p>The guitar is a Fender Stratocaster Electric Guitar that I replicated in Adobe Illustrator. I used shadows and highlights to create depth for the piece as well as added gradient detail. </p>
</div>
<div id="Fancy-Fishes" class="flex-item">
<h3>Fancy Fishes</h3>
<a href="three-projects/int-com-graph/Hw3-Mclain-graning2 copy.jpg" ><img alt="company logo" src="three-projects/int-com-graph/Hw3-Mclain-graning2 copy.jpg" height="150"/></a>
<p>Fancy Fishes is a clothing line that features the underwater style and I created this piece by using many gradient meshes, a scaling pattern for the fish, and layered meshes for the realistic pearl effect. </p>
</div>
<div id="Dragon-Tracks" class="flex-item">
<h3>Dragon Tracks</h3>
<a href="three-projects/int-com-graph/covercover.jpg"><img alt="company logo" src="three-projects/int-com-graph/covercover.jpg" height="150"/></a>
<p>This CD cover was inspired by icycles. The way I captured this look was by using photos of melted crayon wax and putting it into Adobe Photoshop and changing the hue to get the desired color. The smoke was created in Adobe Illustrator as a brush to try and create a unique smoked icycle style. </p>
</div>
<div id="Gelato-Company" class="flex-item">
<h3>L'Airone Gelato</h3>
<a href="three-projects/graphic-design/gelato.jpg"><img alt="company logo" src="three-projects/graphic-design/gelato.jpg" height="150"/></a>
<p>This design was for a gelato company that served all its ice cream as coffee flavors. Thus, I tried to create a coffee-oriented design with a logo centered around coffee in an ice cream cone. </p>
</div>
<div id="Company-Logo" class="flex-item">
<h3>Company Logo</h3>
<a href="three-projects/graphic-design/abstract.jpg"><img alt="company logo" src="three-projects/graphic-design/abstract.jpg" height="150"/></a>
<p>This piece was inspired by the idea of creating a logo for a company with an abstract panda logo. This company's logo is made up of pieces that unify the panda and thus the company. </p>
</div>
<div id="Band-Logo" class="flex-item">
<h3>Band Logo</h3>
<a href="three-projects/graphic-design/abpanC.jpg"><img alt="company logo" src="three-projects/graphic-design/abpanC.jpg" height="150"/></a>
<p>This logo was inspired by the band KISS. If KISS was to have a panda as their mascot then this is the type of logo that they would have. This was made with the crystallize tool in Adobe Illustrator to get the spiky feel. </p>
</div>
<div id="Photo-1" class="flex-item">
<h3>Flower</h3>
<a href="three-projects/Photography_pics/flower.jpg"><img alt="company logo" src="three-projects/Photography_pics/flower.jpg" height="150"/></a>
<p>This photo was created with a painting with light technique where the camera captures a light pattern through long exposure. The more the light is moved in the shot and the longer the exposure, the lighter and movement of light is captured. This photo was captured with a thirty second exposure and edited in Adobe Photoshop. </p>
</div>
<div id="Photo-2" class="flex-item">
<h3>Graffiti</h3>
<a href="three-projects/Photography_pics/IMG_0441.jpg"> <img alt="company logo" src="three-projects/Photography_pics/IMG_0441.jpg" height="150"/></a>
<p>This photo was captured in the heart of downtown Fargo. The graffiti was on a random building from an anonymous artist. So the origins of the art is unknown, however the piece is beautifully painted and was edited in Adobe Photoshop. </p>
</div>
<div id="Photo-3" class="flex-item">
<h3>Grains of Sand</h3>
<a href="three-projects/Photography_pics/IMG_0505.jpg"><img alt="company logo" src="three-projects/Photography_pics/IMG_0505.jpg" height="150"/></a>
<p>This photo was captured of a building’s wall in downtown Fargo that was eroding. The intent of the photo was to try and capture the details of the wall so that the viewer could see the grains of sand. </p>
</div>
</body>这里是JavaScript：
// NOTE: This example will not work locally in all browsers.
// Please try it out on the website for the book http://javascriptbook.com/code/c08/
// or run it on your own server.
$(function() { // When the DOM is ready
var projectList; // Declare global variable
$.ajax({
beforeSend: function(xhr) { // Before requesting data
if (xhr.overrideMimeType) { // If supported
xhr.overrideMimeType("application/json"); // set MIME to prevent errors
}
}
});
// FUNCTION THAT COLLECTS DATA FROM THE JSON FILE
function loadClassProjects() { // Declare function
$.getJSON('data/projects.json') // Try to collect JSON data
.done(function(data){ // If successful
projectList = data; // Store it in a variable
}).fail(function() { // If a problem: show message
$('#classes').html('Sorry! We could not load the Class Projects at the moment');
});
}
loadClassProjects(); // Call the function
// CLICK ON THE EVENT TO LOAD A ClassProjects
$('#content').on('click', '#classes a', function(e) { // User clicks on event
e.preventDefault(); // Prevent loading page
var loc = this.id.toUpperCase(); // Get value of id attr
var newContent = ''; // Build up ClassProjects by
for (var i = 0; i < projectList[loc].length; i++) { // looping through events
newContent += '<li><span class="software">' + projectList[loc][i].software + '</span>';
newContent += '<a href="descriptions.html#';
newContent += projectList[loc][i].title.replace(/ /g, '-') + '">';
newContent += projectList[loc][i].title + '</a></li>';
}
$('#projects').html('<ul>' + newContent + '</ul>'); // Display projectList on page
$('#classes a.current').removeClass('current'); // Update selected item
$(this).addClass('current');
$('#details').text(''); // Clear third column
});
// CLICK ON A SESSION TO LOAD THE DESCRIPTION
$('#content').on('click', '#projects li a', function(e) { // Click on session
e.preventDefault(); // Prevent loading
var fragment = this.href; // Title is in href
fragment = fragment.replace('#', ' #'); // Add space after#
$('#details').load(fragment); // To load info
$('#projects a.current').removeClass('current'); // Update selected
$(this).addClass('current');
});
});这里是JSON：
{
"GDES203": [
{
"software": "Illustrator",
"title": "Gelato Company"
},
{
"software": "Illustrator",
"title": "Company Logo"
},
{
"software": "Illustrator",
"title": "Band Logo"
}
],
"GCOM355": [
{
"software": "Illustrator",
"title": "Fender Guitar"
},
{
"software": "Illustrator",
"title": "Fancy Fishes"
},
{
"software": "Indesign Illustrator Photoshop",
"title": "Dragon Tracks"
}
],
"COM230": [
{
"software": "Photoshop",
"title": "Photo 1"
},
{
"software": "Photoshop",
"title": "Photo 2"
},
{
"software": "Photoshop",
"title": "Photo 3"
}
]
}这里是CSS：
#attended{
margin-left: 20px;
\t margin-right:20px;
\t font-size:25px;
\t margin-top:80px;
}
body {
background-color: #fff;
height:100%;
font-family: 'Open Sans', arial, sans-serif;
width: 960px;
margin: 0 auto 0 auto;
\t color: white;
}
.all{
\t margin-left: auto;
\t margin-right: auto;
\t display:block;
}
h1 {
font-weight: normal;
margin: 28px 0 0 0;
float: left;
width: 225px;
height: 90px;
background-repeat: no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;}
h2 {
font-size: 40px;
text-align: center;
padding: 0;
color: white;
line-height: 1em;
letter-spacing: -.06em;}
h3 {
margin: 0;
font-size: 1.4em;
color: #29BCCA;
font-family: 'Philosopher', sans-serif;
\t padding-bottom: 15px;
}
a {text-decoration: none; color: white;}
.third, .classes {
width: 320px;
float: left;
text-align: center;
}
.hr2{
\t border: none;
border-bottom: 1px solid #999;
\t width: 70%;
\t color:#485A5F;
\t height: 2px;
}
.classes p {border-right: 1px solid #999 ;
\t \t \t
}
#content .classes:last-child p {border-right: none;}
.third p {
padding: 0 20px 0 20px;
margin: 40px 0 20px 0;
text-align: left;
line-height: 1.4em;}
/* Projects */
#classes a {
font-family: 'Philosopher', sans-serif;
font-size: 120%;
text-transform: uppercase;
text-align: left;
line-height: 2.5em;
display: block;
height: 120px; width: 100%;}
#classes img {
width: 30px;
height: 30px;
float: left;
margin-right: 10px;
padding: 10px;
}
#classes a:hover, #projects a:hover {color: #1DA0A3;}
#projects a {
font-family: 'Sahitya', serif;
font-size: 120%;}
#projects p {
margin-top: 2em;}
#projects ul {
border-left: 1px solid #999;
border-right: 1px solid #999;
height: 350px;
padding: 0 20px 0 20px;
margin: 0 0 40px 0;}
#projects li {
list-style-type: none;
padding: 40px 0px 40px 0px;
border-top: 1px solid #d6d6d6;
text-align: left;
}
#projects li:first-child {
border-top: none;
padding-top: 1.8em;}
#projects li .software {
display: inline-block;
width: 110px;
}
#details div {
padding: 1.8em 0 0em 1;}
#details p {
padding: 10px;
margin: 0.8em 0 0 2em;}
你尝试过与媒体查询？ – Ananya
@ananya是的，我只是混淆了如何阻止两个第一步，只显示移动 – Cakers
哪两步说明？你能解释一下吗？清楚你的要求。你正在谈论哪种描述？ – Ananya