我一直在尝试各种各样的方法现在已经让我疯了！我一直在这个网站上工作（http://alex-humphries.com/NC6/），并设置好当你将鼠标悬停在“加入邮件列表”上时，下面的内容会扩展。我希望这可以在点击时切换，或者保持扩展直到再次点击（基本上，我不希望内容在鼠标消失时消失）。这是HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Nina</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://stratus.sc/stratus.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.stratus({
links: 'http://soundcloud.com/ninaschofield/drifting',
theme: 'http://stratus.sc/themes/dark.css',
auto_play: false,
color : '805ffa'
});
});
</script>
<style type="text/css">
body,td,th {
font-family: Quicksand, Serif;
color: #FFF;
size: 0.7em;
}
h1 {
text-shadow: 1px 1px 3px #aaa;
font-family: "QuicksandBold", serif
font-size:1.2em;
font-weight: bold;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
p.style5 {font: 18px/27px 'QuicksandBold', Arial, sans-serif;}
p.style4 {font: 24px/27px 'QuicksandLight', Arial, sans-serif;}
p.style3 {font: 14px/27px 'QuicksandBook', Arial, sans-serif;}
p.style6 {font: 24px/27px 'QuicksandB', Arial, sans-serif;
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9C6CD7));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body bgcolor="#000000" onload="MM_preloadImages('images/fbookmo.png','images/twittermo.png','images/youtubemo.png','images/soundcloudmo.png')"> <div id="social"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','images/fbookmo.png',1)"> <img src="images/fbook.png" width="49" height="49" id="facebook" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Twitter','','images/twittermo.png',1)"> <img src="images/twitter.png" alt="Twitter" width="49" height="49" id="Twitter" /></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('YouTube','','images/youtubemo.png',1)"><img src="images/youtube.png" alt="YouTube" width="49" height="49" id="YouTube" /></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Soundcloud','','images/soundcloudmo.png',1)"><img src="images/soundcloud.png" alt="Soundcloud" width="49" height="49" id="Soundcloud" /></a></div><div id="nina"></div>
<div id="video"><iframe width="420" height="240" src="http://www.youtube.com/embed/zCCYZuqizns" frameborder="0" allowfullscreen></iframe></div>
<div id="text">To mix thoughtful and catchy songs with a uniquely arresting voice and breathtaking beauty is a classic recipe for pop success. But at 21, singer/songwriter Nina has also shown a mature determination to achieve an international career.
</br></br>
Classically trained and having successfully completed a Degree in Vocal Performance at the Academy of Contemporary Music she has done a great deal of professional work to widespread acclaim. Known as a singer from her early years she has performed in public since the age of 16. In 2007 Nina was invited to perform at the Montreux Jazz Festival, sharing the bill with the likes of Tori Amos, Seal, Sly and The Family Stone, Jeff Beck, Beastie Boys and Ben's Brother. Since then, she has continued to perform live as well as working closely with internationally noted Producer Richard Niles (Sir Paul McCartney, Ray Charles, Mariah Carey, Kylie Minogue, Westlife, Tom Jones) with whom she has already produced two singles. She has worked in collaboration with musicians such as Richard Cottle (David Bowie, Seal, Tina Turner), the famous photographer Angelo Valentino (Kate Moss, Naomi Campbell, Usher) and one of America's hottest designers, Arianna Power (Kayne West, Estelle, Metro Station).
</br></br>
As well as supporting John Power (The La's/Cast) on two occasions, she has taken part in the semi-finals of the BBC Radio 2 Young Folk Awards 2008/9. Radio airplay includes coverage by stations such as BFBS, and, in addition to recorded plays, live studio performances for BBC Southern Counties Radio on South Live (syndicated across the southern counties), BBC Solent Radio, Hampshire and Guildford University Radio, Surrey. As well as interviews on local TV, Nina has made appearances on BBC 2's show "Genius" and on Channel 5 for their "Don't Stop Believing" advert.
</br></br>
Nina's recent release "Slow Down Soldier" in aid of Help For Heroes reached number 4 in the UK iTunes Singer/Songwriter chart, receiving extensive radio airplay and TV coverage. As well as supporting the forces, she is a proud ambassador for The Rose Road Association.
</br></br>
Currently working with producers and writers in Los Angeles, Switzerland, Germany and the UK, Nina looks forward to releasing new material at the end of 2012 and performing across the country.</div>
<div id="scloud"></div>
<div id="mailing"><div class="menu-item"><p class="style4">JOIN THE MAILING LIST</h1></p>
<ul>
<li>
Sign up today to get an free track
<p></br></br>
<strong>Name</strong>
<input name="name" type="text" size="30" maxlength="30" />
Email <input name="name" type="text" size="30" maxlength="30" />
<a href="#" class="classname">Sign Up</a></p></br></p></br></br></li></ul></div>
<p class="style4"> </p>
<div class="menu-item3"> <p class="style4">CONTACT NINA</p>
<ul>
<li>
If you wish to contact Nina, please email her at contact@Ninaschofield.com</li></ul></div>
<p class="style4"> </p>
<div class="menu-item4"> <p class="style4">VISIT THE BLOG</p>
<ul><li>
You can see what Nina is up to on her blog here</li></ul></div>
<p class="style4"> </p>
<div class="menu-item2"> <p class="style6">NEW SINGLE: COLOURS OF THE WORLD</p>
<ul><li>
New single out now, listen <a href="http://soundcloud.com" target="new" class="white"><font color="#99CCFF" face="Quicksand">here</font></a>, or thorugh the soundcloud player below</li></ul></div></div>
</nav>
<img alt="full screen background image" src="images/bground.jpg" id="full-screen-background-image" />
<div id="wrapper">
</div> <div id="credits">©2012 Nina Schofield. Design by <a href="http://alex-humphries.com" target="new"><font color="#FFFFFF" size="+2">Alex Humphries</font></a></div>
</body>
</html>
这是CSS：
@charset "UTF-8";
@font-face {
font-family: 'QuicksandLight';
src: url('Quicksand-fontfacekit/Quicksand_Light-webfont.eot');
src: url('Quicksand-fontfacekit/Quicksand_Light-webfont.eot?#iefix') format('embedded-opentype'),
url('Quicksand-fontfacekit/Quicksand-fontfacekitQuicksand_Light-webfont.woff') format('woff'),
url('Quicksand-fontfacekit/Quicksand_Light-webfont.ttf') format('truetype'),
url('Quicksand-fontfacekit/Quicksand_Light-webfont.svg#QuicksandLight') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'QuicksandBook';
src: url('Quicksand-fontfacekit/Quicksand_Book-webfont.eot');
src: url('Quicksand-fontfacekit/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
url('Quicksand-fontfacekit/Quicksand_Book-webfont.woff') format('woff'),
url('Quicksand-fontfacekit/Quicksand_Book-webfont.ttf') format('truetype'),
url('Quicksand-fontfacekit/Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'QuicksandBold';
src: url('Quicksand-fontfacekit/Quicksand_Bold-webfont.eot');
src: url('Quicksand-fontfacekit/Quicksand_Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('Quicksand-fontfacekit/Quicksand_Bold-webfont.woff') format('woff'),
url('Quicksand-fontfacekit/Quicksand_Bold-webfont.ttf') format('truetype'),
url('Quicksand-fontfacekit/Quicksand_Bold-webfont.svg#QuicksandBold') format('svg');
font-weight: normal;
font-style: normal;
}
html, body {
height: 80%;
width: 100%;
padding: 0;
margin: 0;
}
#nina {
background-image: url(images/nina.png);
height: 53px;
width: 418px;
position: absolute;
top: 40px;
right: 50px;
}
#social {
height: 51px;
width: 237px;
position: absolute;
top: 40px;
right: 500px;
}
#video {
height: 241px;
width: 420px;
position: absolute;
top: 130px;
right: 50px;
}
#text {
font-family: 'QuicksandBook', serif;
font-weight:400;
font-size: 1em;
height: 240px;
padding-right:5px;
width: 25%;
color: #FFF;
position: absolute;
top: 130px;
right: 490px;
overflow:scroll;
overflow-x: hidden;
z-index:4;
background-color:rgba(0,0,0,0.5);
border-radius:5px;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(4,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(4,0,0,0.5);
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9C6CD7));
}
#scloud {
position:absolute;
left:10px;
bottom:50px;
width:50%;
font-family: 'QuicksandLight', serif;
font-size: 1.9em;
color:#FFF;
text-align:left;
}
#mailing {
width: 70%;
height:50px;
position:absolute;
right:42px;
bottom:35%;
text-align:right;
font-family: 'QuicksandLight', serif;
font-size: 0.9em;
font-weight:200;
}
.menu-item ul {
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
/*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item:hover ul {
height: 93px;
}
.menu-item2 ul {
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
/*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item2:hover ul {
height: 40px;
}
.menu-item3 ul {
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
/*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item3:hover ul {
height: 40px;
}
.menu-item4 ul {
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
/*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item4:hover ul {
height: 40px;
}
#credits {
height:auto;
width:auto;
position:absolute;
left:5px;
bottom:35px;
font-size:0.7em;
color:#FFF;
font-family:'QuicksandLight', serif;
}
#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 400px;
width: 100%;
height: auto;
position: fixed;
background-attachment:fixed;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
padding:2px 20px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}.classname:active {
position:relative;
top:1px;
}
.classname:white {
color:#FFF
}
#iplayer {
position:absolute;
bottom:0px;
width:100%;
}
element.style {
visibility:visible;
}
#stratus iframe {
visibility:hidden;
}
stratus.css (line 3)
#stratus, #stratus iframe {
height:32px;
width:100%;
}
stratus.css (line 2)
::selection, *::-moz-selection, *::-webkit-selection {
background-color:#FF6600;
background-position:initial initial;
background-repeat:initial initial;
color:#FFFFFF;
}
application.css
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0;
font-family:'QuicksandLight';
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
outline:0;
padding:0;
vertical-align:baseline;
}
谢谢！
答案 0 :(得分：0)
以下是jQuery API：
的示例示例：切换所有段落。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
<script>
$("button").click(function () {
$("p").toggle();
});
</script>
</body>
</html>
调整到您的代码应该是这样的：
$("#join").click(function () {
$("#form").toggle();
});
鉴于您的链接应为join，而注册表格为form
如果您希望使用滑动动作进行动画切换，则可以改为使用slideToggle()：
$("#join").click(function () {
$("#form").slideToggle("slow");
});