jQuery Объединение toggle(), show() и hide()

Question

У меня это работает точно так, как я хочу (см. Скрипку ниже), кроме того, что я обнаружил, что toggle() устарел. Мне интересно, могу ли я использовать toggleClass() или hide() и show() для переключения видимости выпадающего меню.

$("#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>

В качестве альтернативы вы можете изменить HTML структуры, чтобы положить #latin div внутри #dropdownpanel.

Answer 2

i добавлена ​​обертка для #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>