slideToggle（）不能使用，如果其他人有多個選擇

Question

我想使用slidetoggle()功能來做多件事情我使用如果其他但它不會工作你能幫我 javaScript代碼解釋什麼我即將做我要去創建3個面板，並三次點擊來激活這些面板，但它沒有工作

[enter image description here`<script> 
 
$(document).ready(
 
function(){ 
 

 
$("#flip").click(function(){$("#panel").slideToggle("slow");}); 
 
} 
 
function(){ 
 

 
$("#flip").click(function(){$("#panell").slideToggle("slow");}); 
 
} 
 
function(){ 
 

 
$("#flip").click(function(){$("#panelll").slideToggle("slow");}); 
 
} 
 
); 
 
</script>`] 
 
[1] 
 

 
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, img, ins, kbd, q, s, samp, 
 
small, strike, strong, sub, sup, tt, var, 
 
b, u, i, center, 
 
dl, dt, dd, ol, ul, li, 
 
fieldset, form, label, legend, 
 
table, caption, tbody, tfoot, thead, tr, th, td, 
 
article, aside, canvas, details, embed, 
 
figure, figcaption, footer, header, hgroup, 
 
menu, nav, output, ruby, section, summary, 
 
time, mark, audio, video { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0; 
 
\t font-size: 100%; 
 
\t font: inherit; 
 
\t vertical-align: baseline; 
 
} 
 
/* HTML5 display-role reset for older browsers */ 
 
article, aside, details, figcaption, figure, 
 
footer, header, hgroup, menu, nav, section { 
 
\t display: block; 
 
} 
 
body { 
 
\t line-height: 1; 
 
} 
 
ol, ul { 
 
\t list-style: none; 
 
} 
 
blockquote, q { 
 
\t quotes: none; 
 
} 
 
blockquote:before, blockquote:after, 
 
q:before, q:after { 
 
\t content: ''; 
 
\t content: none; 
 
} 
 
table { 
 
\t border-collapse: collapse; 
 
\t border-spacing: 0; 
 
} 
 

 
/** { 
 
    outline: 1px solid black; 
 
}*/ 
 

 
#header_buttons { 
 
    text-align: right; 
 
    padding-top: 10px; 
 
\t height:150px; 
 
} 
 
#header_buttons a:hover{text-decoration: underline;} 
 
#header_buttons li, a { 
 
    color: gray; 
 
    text-decoration: none; 
 
    display: inline; 
 
    list-style: none; 
 
    padding: 4px; 
 
    font-family: Arial; 
 
    font-size: 13px; 
 
} 
 

 

 
#sign_in { 
 
    display: inline-block; 
 
    border-radius: 3px; 
 
    background-color: #29A0F0; 
 
    padding-top: 0px; 
 
\t margin-right:15px; 
 
    padding-bottom: 30px; 
 
} 
 

 
li#sign_in { 
 
    display: block; 
 
    margin-top: 10px; 
 
} 
 

 
#sign_in:hover{box-shadow: 0px 1px 0px 0px #e6e6e6;} 
 
#sign_in a { 
 
    margin: 0 auto; 
 
/*  border:1px solid black; 
 
*/ 
 
    font-weight: bold; 
 
    text-align: center; 
 
    color: #FFFFFF; 
 
} 
 

 
#sign-in-text { 
 
    margin-top: 20px; 
 
} 
 
/*DAMN -- This was/is CONFUSING but it sets the sign-in button properties*/ 
 
div#header_buttons ul li#sign_in { 
 
    display: inline-block; 
 
    width: 70px; 
 
    height: 30px; 
 
/* border: 1px solid black; 
 
*/ text-align: center; 
 
    margin-bottom: 25px; 
 
} 
 
#sign_in a:hover { 
 
    text-decoration: none; 
 
    cursor: default; 
 
} 
 

 
#google_logo { 
 
    margin: auto; 
 
    margin-top: 50px; 
 
    margin-bottom: 10px; 
 
} 
 

 
#google_logo > img{ 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 
#query { 
 
    width: 572px; 
 
    margin: auto; 
 
} 
 
#query > input { 
 
    width:572px; 
 
    height:30px; 
 
    margin: auto; 
 
    background-image: url("images/microphone.png"); 
 
    background-position: right; 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
} 
 
#query input[type="text"] { 
 
font-size: 17px; 
 
} 
 

 
.buttons { 
 
    width: 572px; 
 
    margin: auto; 
 
    margin-top: 5px; 
 
    text-align: center; 
 
} 
 

 
button#search { 
 
    margin-top: 10px; 
 
    font: bold 11px Arial, sans-serif !important; 
 
    width: 150px; 
 
    height: 33px; 
 
    -webkit-border-radius: 0px; 
 
} 
 
button#lucky { 
 
    font: bold 11px Arial, sans-serif !important; 
 
    width: 150px; 
 
    height: 33px; 
 
} 
 

 
#footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    min-height: 15px; 
 
    width: 100%; 
 
\t height:33px; 
 
/* border: 1px solid black; 
 
*/ background-color: #e3e3e3; 
 
} 
 

 

 

 

 
#footer-left ul li{ 
 
    float: left; 
 
/* border:1px solid black; 
 
*/ display: inline; 
 
    padding: 5px 3px; 
 
    padding-top: 14px; 
 
    vertical-align: bottom; 
 
} 
 

 

 
#footer-left ul li a{ 
 
/*  border:1px solid black; 
 
*/ 
 
    padding: 30px 8px; 
 
    font-family: Arial; 
 
    font-size: 12px; 
 
    text-align: center; 
 
} 
 

 
#footer-right ul li 
 
{ 
 
    float: right; 
 
    display: inline; 
 
    padding: 30px 8px; 
 
    padding-top: 14px; 
 
    vertical-align: bottom; 
 
} 
 

 

 
#footer-right ul li a{ 
 
    padding: 30px 8px; 
 
    font-family: Arial; 
 
    font-size: 12px; 
 
    text-align: center; 
 
} 
 
#flip { 
 
    text-align: center; 
 
    background-image:url("9blocks.png"); 
 
\t width:16px; 
 
\t height:16px; 
 
    border: solid 1px #c3c3c3; 
 
} 
 

 
#panel { 
 
    display: none; 
 
} 
 

 

 
#panell { 
 
    display: none; 
 
} 
 

 

 
#panelll { 
 
    display: none; 
 
}

<!doctype html> 
 
<html> 
 
    <head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(
 
function(){ 
 

 
    $("#flip").click(function(){$("#panel").slideToggle("slow");}); 
 
} 
 
function(){ 
 

 
    $("#flip").click(function(){$("#panell").slideToggle("slow");}); 
 
} 
 
function(){ 
 

 
    $("#flip").click(function(){$("#panelll").slideToggle("slow");}); 
 
} 
 
); 
 
</script> 
 
     <meta charset="UTF-8"> 
 
     <title>Google</title> 
 
     <link rel="stylesheet" type="text/css" href="head.css"> 
 
    </head> 
 
    <body> 
 
     <div id="header_buttons"> 
 
     <ul> 
 

 
<!-- <li id="gmail"><a style="margin-right:5px;margin-top:50px" href="https://mail.google.com/mail/?tab=wm">Gmail</a></li> 
 
<li id="you"><a style="margin-right:35px;margin-top:50px" href="https://plus.google.com/?gpsrc=ogpy0&amp;tab=wX">Images</a></li> --> 
 

 
<li id="sign_in"><a id="sign-in-text" href="https://accounts.google.com/ServiceLogin?hl=en&amp;continue=https://www.google.com/">Sign In</a></li> 
 
<div id="flip" style="margin-left: 735px;margin-top: -47px;" ></div> 
 
<div id="panel"> 
 
<img src="untitled.png" style="margin-left:635px;margin-top:0px;" width="179" height="200" alt="Planets" usemap"#planetmap"> 
 
<map name="planetmap"> 
 
<area shape="rect" alt="" title="" coords="4,1,49,54" href="1" target="_self" /> 
 
<area shape="rect" alt="" title="" coords="65,2,109,54" href="2" target="_self" /> 
 
<area shape="rect" alt="" title="" coords="124,1,174,59" href="3" target="_self" /> 
 
<area shape="rect" alt="" title="" coords="6,69,50,125" href="4" target="_self" /> 
 
<area shape="rect" alt="" title="" coords="63,66,110,126" href="5" target="_self" /> 
 
<area shape="rect" alt="" title="" coords="121,68,172,129" href="6" target="_self" /> 
 
<area shape="rect" alt="" title="" coords="6,140,47,192" href="7" target="_self" /> 
 
<area shape="rect" alt="" title="" coords="67,139,113,194" href="8" target="_self" /> 
 
<area shape="rect" alt="" title="" coords="128,142,172,194" href="9" target="_self" /> 
 
</map> 
 
</div> 
 
<div id="flip" style="margin-left: 635px;margin-top: -17px;" ></div> 
 
<div id="panell"> 
 
<img src="untitled1.png" style="margin-right:210px;margin-top:0px;" width="61" height="200" alt="Planets" usemap="#planetmap"> 
 
<map name="planetmap"> 
 
<area shape="rect" alt="" title="" coords="4,1,49,54" href="1" target="_self" /> 
 
<area shape="rect" alt="" title="" coords="6,69,50,125" href="4" target="_self" /> 
 
<area shape="rect" alt="" title="" coords="6,140,47,192" href="7" target="_self" /> 
 
</map> 
 
</div> 
 
<div id="flip" style="margin-left: 535px;margin-top: -17px;" ></div> 
 
<div id="panelll"> 
 
<img src="untitled2.png" style="margin-right:320px;margin-top:0px;" width="179" height="60" alt="Planets" usemap="#planetmap"> 
 
<map name="planetmap"> 
 
<area shape="rect" alt="" title="" coords="4,1,49,54" href="1" target="_self" /> 
 
<area shape="rect" alt="" title="" coords="65,2,109,54" href="2" target="_self" /> 
 
<area shape="rect" alt="" title="" coords="124,1,174,59" href="3" target="_self" /> 
 
</map> 
 
</div> 
 
\t \t \t 
 
\t \t \t 
 

 

 
    <div class="button"> <i class="fa fa-th fa-2x"></i> </div> 
 

 
     </ul> 
 
    </div> 
 

 
     <div id="google_logo"> 
 
     <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"> 
 
     </div> 
 
     <div id=query> 
 
     <input type="text"></input> 
 
     </div> 
 
     <div class="buttons"> 
 
     <button type="submit" value="Submit" id="search">Google Search</button> 
 
     <button id="lucky">I'm Feeling Lucky</button> 
 
     </div> 
 
     <div id="footer"> 
 
     <div id="footer-left"> 
 
      <ul> 
 
       <li><a href="https://www.google.com/intl/en/ads/?fg=1">Advertising</a></li> 
 
       <li><a>Business</a></li> 
 
       <li><a>About</a></li> 
 
      </ul> 
 
     </div> 
 
     <div id="footer-right"> 
 
      <ul> 
 
           <li><a>Privacy & Terms</a></li> 
 
        <li><a>Settings</a></li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </body> 
 
</html>

Answer 1

您無法通過多個回調，這樣，請嘗試以下。

$(document).ready(function(){ 
    $("#flip").click(function(){ 
     $("#panel, #panell, #panelll").slideToggle("slow"); 
    }); 
}); 

"#panel, #panell, #panelll"將在單個選擇器中選擇所有這三個元素。