0

一段时间以来，我一直在尝试各种让我发疯的方法！我一直在这个网站 (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">&nbsp;</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">&nbsp;</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">&nbsp;</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;
}

谢谢！

4

1 回答 1

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();
});

而您的链接应该有 idjoin和注册表单 idform

如果你想要一个带有滑动动作的动画切换，你可以使用slideToggle()代替：

$("#join").click(function () {
   $("#form").slideToggle("slow");
});
于 2013-01-04T13:00:43.803 回答