jQuery合併切換（），顯示（）和隱藏（）

Question

我有這個工作完全像我想要的（見小提琴下面），除了我發現toggle（）已被棄用。我想知道是否可以使用toggleClass（）或hide（）和show（）來切換dropdownpanel的可見性。

$("#dropdown").click(function() { 
 
    $("#dropdownpanel").toggle(); 
 
}); 
 

 
$("#latinlink").click(function() { 
 
    $("#sometext").hide(); 
 
    $("#latin").show(); 
 
}); 
 

 
$("#back").click(function() { 
 
    $("#latin").hide(); 
 
    $("#sometext").show(); 
 
});

#dropdownpanel { 
 
    width: 236px; 
 
    height: 100vh; 
 
    background: rgba(00, 00, 00, 0.55); 
 
    color: #ffffff; 
 
    position: fixed; 
 
    top: 38px; 
 
    left: 0px; 
 
    display: none; 
 
    padding: 5px; 
 
} 
 

 
#latin { 
 
    width: 236px; 
 
    height: 100vh; 
 
    background: rgba(00, 00, 00, 0.55); 
 
    color: #ffffff; 
 
    position: fixed; 
 
    top: 38px; 
 
    left: 0px; 
 
    display: none; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <button id="dropdown"> 
 
     Dropdown 
 
    </button> 
 
    
 
    <div id="dropdownpanel"> 
 
     <p id="sometext">Click 
 
     <a href="#" id="latinlink">here</a> to read some latin... 
 
     </p> 
 
    </div> 
 
    
 
    <div id="latin"> 
 
    <button id="back"> 
 
    Back 
 
    </button> 
 
     <br /> Lorem ipsum dolor sit amet, epicuri argumentum constituam eum ea. Munere aliquip te nec, at nec dicat fuisset offendit, quo an sonet honestatis. Tempor facete sadipscing te his. Nam vivendo postulant reprehendunt te, offendit principes pri ex, at causae 
 
     oblique torquatos pro. 
 
     <br /> 
 
     <br /> Libris philosophia has eu, nam iriure alienum intellegam at. Nec appareat electram ne, amet nonumes per te. Usu eu nisl verterem, labore regione legimus in nam, vel saperet laboramus voluptatibus ut. Ad eam altera nemore. No nobis corpora pro, qui 
 
     ex tale suas dissentias, et iisque omittam inciderint sit. Usu ut case menandri vituperata. 
 
    </div>

JSFiddle

Answer 1

當前的行爲是因爲當你點擊#latinlink元素是隱藏#dropdownpanel，這樣的話，當你再次點擊#dropdown按鈕，就會切換#dropdownpanel從隱藏到可見再次，這與#back按鈕的功能相同。

來解決這個問題，而完全不改變HTML可能是更新#dropdown點擊處理程序來測試是否#latin最簡單的方法是當前可見：

$("#dropdown").click(function() { 
 
    if ($("#latin").is(":visible")) 
 
    $("#dropdownpanel").hide(); 
 
    else 
 
    $("#dropdownpanel").toggle(); 
 
    $("#latin").hide(); 
 
}); 
 
    
 
$("#latinlink").click(function() { 
 
    $("#dropdownpanel").hide(); 
 
    $("#latin").show(); 
 
}); 
 
    
 
$("#back").click(function() { 
 
    $("#latin").hide(); 
 
    $("#dropdownpanel").show(); 
 
});

#dropdownpanel, #latin { 
 
     width: 236px; 
 
     height: 100vh; 
 
     background: rgba(00, 00, 00, 0.55); 
 
     color: #ffffff; 
 
     position: fixed; 
 
     top: 38px; 
 
     left: 0px; 
 
     display: none; 
 
     padding: 5px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <button id="dropdown"> 
 
     Dropdown 
 
    </button> 
 
    
 
    <div id="dropdownpanel"> 
 
     <p>Click 
 
     <a href="#" id="latinlink">here</a> to read some latin... 
 
     </p> 
 
    </div> 
 
    
 
    <div id="latin"> 
 
     <button id="back"> 
 
     Back 
 
     </button> 
 
     <br /> Lorem ipsum dolor sit amet, epicuri argumentum constituam eum ea. Munere aliquip te nec, at nec dicat fuisset offendit, quo an sonet honestatis. Tempor facete sadipscing te his. Nam vivendo postulant reprehendunt te, offendit principes pri ex, at causae 
 
     oblique torquatos pro. 
 
     <br /> 
 
     <br /> Libris philosophia has eu, nam iriure alienum intellegam at. Nec appareat electram ne, amet nonumes per te. Usu eu nisl verterem, labore regione legimus in nam, vel saperet laboramus voluptatibus ut. Ad eam altera nemore. No nobis corpora pro, qui 
 
     ex tale suas dissentias, et iisque omittam inciderint sit. Usu ut case menandri vituperata. 
 
    </div>

另外，你可能會改變將#latin div放入#dropdownpanel的HTML結構。

Answer 2

我爲#dropdownpanel和#latin添加了包裝。這裏引用jsfiddle並將樣式從#dropdownpanel更改爲#dropdowncontent

Answer 3

問題是該按鈕正在切換不可見的元素。

$("#dropdown").click(function() { 
 
\t if ($('#dropdownpanel').is(':visible')) { 
 
\t \t $("#dropdownpanel").hide(); 
 
\t } else if ($('#latin').is(':visible')) { 
 
\t \t $("#latin").hide(); 
 
\t } else { 
 
\t \t $("#dropdownpanel").show(); 
 
\t } 
 
}); 
 
$("#latinlink").click(function() { 
 
\t $("#dropdownpanel").hide(); 
 
\t $("#latin").show(); 
 
}); 
 
$("#back").click(function() { 
 
\t $("#latin").hide(); 
 
\t $("#dropdownpanel").show(); 
 
});

#dropdownpanel { 
 
    width: 236px; 
 
    height: 100vh; 
 
    background: rgba(00, 00, 00, 0.55); 
 
    color: #ffffff; 
 
    position: fixed; 
 
    top: 38px; 
 
    left: 0px; 
 
    display: none; 
 
    padding: 5px; 
 
} 
 

 
#latin { 
 
    width: 236px; 
 
    height: 100vh; 
 
    background: rgba(00, 00, 00, 0.55); 
 
    color: #ffffff; 
 
    position: fixed; 
 
    top: 38px; 
 
    left: 0px; 
 
    display: none; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="dropdown">Dropdown</button> 
 
<div id="dropdownpanel"> 
 
    <p>Click <button id="latinlink">here</button> to read some latin...</p> 
 
</div> 
 
<div id="latin"> 
 
    <button id="back">Back</button><br> Lorem ipsum dolor sit amet, modo vitae latine id sea, ea illud facilis definitiones cum. Ei mea ignota iuvaret, debet verear adipiscing no mel, mel gubergren torquatos temporibus ex. Mei nemore mandamus et. Omnes 
 
    legimus principes pri et.<br> 
 
    <br> Nam eu odio facer cotidieque, cum in reque elitr fastidii. An duo hinc iisque principes, nostro mollis laoreet cu ius. No mel habeo soluta repudiare, ex qui tritani apeirian delicatissimi. Eos ei dolore option definitiones, ad sit liber scaevola 
 
    dissentiet. 
 
</div>