javascript - JavaScript 切换/显示问题
问题描述
您好这里的新开发人员，所以请放轻松！
我目前正在尝试构建一个简单的仪表板。我有一长串触发每个部分隐藏或显示的 toggle() 函数。
用户需要做的第一件事是点击 PHARMA
一旦他们这样做，它就会切换#pharmaDashboard、#welcomeDashboard、#pharma_canvas、#welcome_canvas
问题是，如果用户在任何其他不是概览的画布上，当他们点击药品时，概览仍然与欢迎画布一起切换，它应该只是显示欢迎画布。
我希望我可以输入一个简单的 if 条件，说明“如果欢迎画布正在显示，请确保其他所有内容都保持隐藏”，但是无论我如何切片它 - 似乎它没有检测到 WelcomeCanvas 正在显示。这是因为 toggle() 在 css 领域做了其他事情吗？（你会在我的代码中看到我尝试过的是 :visible AND if display === block）
$( document ).ready(function() {
$('#pharma_BPUAccessBtn').click(function(){
//console.log(listEmails + "HELLO");
//console.log(getCurrentEmail + "This should be emails");
//$('#pharma_AO_canvas').toggle();
$('#pharma_BPUAccessOnly').addClass("selected_item_grey");
$("#pharma_default, #pharma_CK, #pharma_QL, #pharma_Team, #pharma_Train").removeClass("selected_item_grey");
//Hide other canvases not in use//
$('#pharmaceuticals_canvas, #welcome_canvas, #pharma_CK_canvas, #pharma_QL_canvas, #pharma_team_canvas, #pharma_training_canvas').hide();
//Reset Statements go below Here: //
$('#our_role_rd_content, #our_role_com_content').hide();
$('#our_role_sc_content').show();
console.log(listEmails.length);
for(var i=0;i<listEmails.length;i++){
console.log(getCurrentEmail.toLowerCase() == listEmails[i][0].toLowerCase());
if(getCurrentEmail.toLowerCase() == listEmails[i][0].toLowerCase()){
$('#pharma_AO_canvas').css('display', 'block');
$('#access_denied_canvas').css('display', 'none');
break;
}
//else if(getCurrentEmail != listEmails[i][0]){
else{
$('#access_denied_canvas').css('display', 'block');
$('#pharma_AO_canvas').css('display', 'none');
}
}
});
$('.menuBtns').click(function(){
//This will decrease the left menu size on click//
$("#left_menu").toggleClass("menu_decrease");
$(".left_menu_title").toggleClass("menu_decrease_title");
});
//Team Hover over Effects//
$('#rdDiagramArea').hover(function(){
$('#staceyLarsonPic').toggleClass('rdShadow');
});
$('#coDiagramArea').hover(function(){
$('#billReidyPic, #dougBeersPic, #danKumPic').toggleClass('comShadow');
});
$('#scDiagramArea').hover(function(){
$('#billReidyPic, #liamWhitnellPic, #koenVerschPic, #ernestoLugoPic, #oscarGonzalezPic, #erikGijsbersPic, #quanChenPic, #wouterPersonsPic').toggleClass('scShadow');
});
$('#finDiagramArea').hover(function(){
$('#dougBeersPic, #danKumPic').toggleClass('finShadow');
});
//Canvas Properties//
$('#pharmaceuticals_canvas, #pharma_CK_canvas, #pharma_QL_canvas, #pharma_dashboard, #pharma_team_canvas, #pharma_AO_canvas, #pharma_training_canvas, #access_denied_canvas').css('display', 'none');
//Reset Statements go below Here: //
function resetContentFunction(){
$('#our_role_rd_content, #our_role_com_content').hide();
$('#our_role_sc_content').show();
$('#overview_ck_sc_chart, #overview_ck_nonsc_chart').hide();
$('#overview_dropDownArrow_sc, #overview_dropDownArrow_nonsc').removeClass("downArrow");
}
function welcomeDisplay(){
//var welcomeAction = document.getElementById("#welcomeCanvas")
if($('#welcomeCanvas').css('display') === 'inline'){
console.log("true")
//$('#pharma_CK_canvas, #pharma_QL_canvas, #pharma_team_canvas, #pharma_AO_canvas, #pharma_training_canvas, #access_denied_canvas').css('display', 'none');
}
}
welcomeDisplay();
$('#pharmBtn').click(function(){
//Opens up Overview, as default
//opens up the PHARMA Dashboard / Right Dashboard //
//Toggles the WELCOME Dashboard which is not secific to any sector's dashboard//
$('#pharma_dashboard, #welcome_dashboard,#pharmaceuticals_canvas, #welcome_canvas').toggle();
$('#welcomeCanvas').addClass('displayBlock');
//The secondary menu/ dashboard menu item will turn grey //
$("#pharma_default").addClass("selected_item_grey");
$("#pharma_CK, #pharma_QL, #pharma_Team, #pharma_BPUAccessOnly, #pharma_Train").removeClass("selected_item_grey");
//This is for the Background color of the menu will stay when sector is selected//
$("#pharma_left_menu").toggleClass("selected_left_menu_title");
//Hide other canvases not in use//
$('#welcomeCanvas, #pharma_CK_canvas, #pharma_QL_canvas, #pharma_team_canvas, #pharma_AO_canvas, #pharma_training_canvas, #access_denied_canvas').css('display', 'none');
resetContentFunction()
});
//Start Dashboard Journey Here//
$('#pharma_OBtn').click(function(){
$('#pharmaceuticals_canvas').css('display','block');
$("#pharma_default").addClass("selected_item_grey");
$("#pharma_CK, #pharma_QL, #pharma_Team, #pharma_BPUAccessOnly,#pharma_Train").removeClass("selected_item_grey");
//Hide other canvases not in use//
$('#pharma_CK_canvas, #welcome_canvas, #pharma_QL_canvas, #pharma_team_canvas, #pharma_AO_canvas, #pharma_training_canvas, #access_denied_canvas').css('display', 'none');
resetContentFunction()
});
$('#pharma_CKBtn').click(function(){
$(pharma_CK_canvas).css('display','block');
$("#pharma_CK").addClass("selected_item_grey");
$("#pharma_QL, #pharma_default, #pharma_Team, #pharma_BPUAccessOnly,#pharma_Train").removeClass("selected_item_grey");
$('#pharmaceuticals_canvas, #welcome_canvas, #pharma_QL_canvas, #pharma_team_canvas, #pharma_AO_canvas, #pharma_training_canvas, #access_denied_canvas').css('display', 'none');
resetContentFunction()
});
$('#pharma_QLBtn').click(function(){
$('#pharma_QL_canvas').css('display','block');
$("pharma_QL").addClass("selected_item_grey");
$("#pharma_default, #pharma_CK, #pharma_Team, #pharma_BPUAccessOnly,#pharma_Train").removeClass("selected_item_grey");
//Hide other canvases not in use//
$('#pharmaceuticals_canvas, #welcome_canvas, #pharma_CK_canvas, #pharma_team_canvas, #pharma_AO_canvas, #pharma_training_canvas, #access_denied_canvas').css('display', 'none');
resetContentFunction()
});
$('#pharma_TeamBtn').click(function(){
$('#pharma_team_canvas').css('display','block');
$('#pharma_Team').addClass("selected_item_grey");
$("#pharma_default, #pharma_CK, #pharma_QL, #pharma_BPUAccessOnly, #pharma_Train").removeClass("selected_item_grey");
//Hide other canvases not in use//
$('#pharmaceuticals_canvas, #welcome_canvas, #pharma_CK_canvas, #pharma_QL_canvas, #pharma_AO_canvas, #pharma_training_canvas, #access_denied_canvas').css('display', 'none');
resetContentFunction()
});
$('#pharma_TrainBtn').click(function(){
$('#pharma_training_canvas').css('display','block');
$('#pharma_Train').addClass("selected_item_grey");
$("#pharma_default, #pharma_CK, #pharma_QL, #pharma_Team, #pharma_BPUAccessOnly").removeClass("selected_item_grey");
//Hide other canvases not in use//
$('#pharmaceuticals_canvas, #welcome_canvas, #pharma_CK_canvas, #pharma_QL_canvas, #pharma_team_canvas, #pharma_AO_canvas, #access_denied_canvas').css('display', 'none');
resetContentFunction()
});
//Our Functios Actions//
$('#our_role_rd_content, #our_role_com_content').hide();
//On button click the content will hide or show and toggle the matching class shadows.
//Overview CK drop Downs for Active Projects//
$('#overview_ck_sc_chart, #overview_ck_nonsc_chart').hide();
$('#overview_sc_dropdown').click(function(){
$('#overview_ck_sc_chart').toggle();
$('#overview_dropDownArrow_sc').toggleClass("downArrow");
});
$('#overview_nonsc_dropdown').click(function(){
$('#overview_ck_nonsc_chart').toggle();
$('#overview_dropDownArrow_nonsc').toggleClass("downArrow");
});
//End of Document.Ready//
});#containter_box
{
font-family:"Arial"!important;
margin:auto;
}
#container
{
width:100%;
margin:auto;
}
#contentBox {
margin-right: 0px !important;
margin-left:0px!important;
}
#contentBox table table {
padding: 5px 0px 10px 10px !important;
}
/* Main Section */
.main_container{
/*
width:1260px;
height: 470px;
*/
}
#canvas{
display: inline-block;
width: 70%;
}
.column_right{
float: right;
position: relative;
width: 179px;
border-radius: 5px 0px 0px 5px;
margin-top: -240px;
z-index: 3;
height: 245px;
background-color: #f6f6fc;
}
#pharma_right_column{
margin-top: -470px!important;
}
#wrapperForMenus{
position: sticky;
top: 0;
}
/* Menus */
#left_menu{
height: 100vh;
width: 200px;
float: left;
background-color: #323896;
}
.displayNone{
display: none;
}
.displayBlock{
display: block!important;
}
.main_menu_title{
font-family: Arial Black;
font-size: 25px;
text-decoration: none!important;
color: white!important;
margin-left: 10px;
margin-top: 10px;
}
.main_menu_subtitle{
font-family: Arial Black;
font-size: 12px;
color: white!important;
text-decoration: none!important;
margin-left: 10px;
margin-top: 5px;
}
.left_menu_title{
font-family: Arial Black!important;
font-size: 12px;
width: 200px;
color: white!important;
margin-left: 10px;
margin-top: 10px;
height: 35px;
padding-left: 3px;
padding-top: 9px;
border-radius: 5px 0px 0px 5px;
text-decoration: none!important;
background: linear-gradient(to right, #323896 50%, #f6f6fc 50%) left;
background-size: 200%;
transition: .5s ease-out;
}
.left_menu_title:hover{
background-position: right;
color: #323896!important;
cursor: pointer;
text-decoration: none!important;
}
.row_left_menu_item{
height: 15%;
}
.menu_decrease{
width:115px!important;
transition: all .5s linear;
}
.menu_decrease_title{
font-size: 11px!important;
}
.menuBtns{
text-decoration: none!important;
}
.inactiveLink {
pointer-events: none;
cursor: default;
}
.selected_left_menu_title{
color: #323896!important;
background: #f6f6fc!important;
}
.dashboard_menu_title{
font-family: Arial Black;
font-size: 25px;
color: #323896!important;
margin-left: 10px;
margin-top: 10px;
}
.dashboard_menu_subtitle{
font-family: Arial Black;
font-size: 12px;
color: #acacac!important;
margin-left: 10px;
margin-top: 5px;
}
#dashboard_menu{
height: 100vh;
width: 200px;
float:left;
background-color: #f6f6fc;
box-shadow: 4px 0 5px -2px rgb(0 0 0 / 20%);
border-radius: 0px 5px 5px 0px;
}
.dashboard_menu_selection{
font-family: Arial Black;
font-size: 12px;
color: #acacac!important;
margin-left: 10px;
margin-top: 49px;
}
#userProfileRight{
background-color: #F6F6Fc;
width: 13%;
height: 300px;
position: fixed;
right: 1.35%;
z-index: 5;
border-radius: 10px 0px 0px 10px;
}
.userProfileWide{
width: 27%!important;
height: 106px!important;
position: absolute!important;
}
.userProfileInfoWide{
display: inline-block;
}
#greeting_section{
background-color: #ffa000;
margin-top: 25px;
border-radius: 10px;
padding: 5px;
margin-left: 35px;
display: inline-block;
position: relative;
width: 525px;
height: 80px;
}
#greeting_section_2{
background-color: #ffa000;
margin-top: 25px;
border-radius: 10px;
padding: 5px;
margin-left: 35px;
display: inline-block;
position: relative;
width: 525px;
height: 123px;
}
#greeting_section_1{
background-color: #ffa000;
margin-top: 140px;
border-radius: 10px;
padding: 5px;
margin-left: 107px;
display: inline-block;
position: relative;
width: 525px;
height: 137px;
}
#greeting_tutorial_message{
background-color: #00b5e2;
margin-top: 10px;
border-radius: 10px;
padding: 5px;
margin-left: 267px;
position: relative;
width: 200px;
height: 100px;
}
#greeting_section_title{
color: white!important;
font-family: Arial Black;
font-size: 20px;
margin-left: 5px;
margin-top: 5px;
font-weight: bold;
}
#greeting_section_title_pharm{
color: white!important;
font-family: Arial Black;
font-size: 16px;
margin-left: 5px;
margin-top: 5px;
font-weight: bold;
}
#geeting_section_subTitle{
color: white!important;
font-family: arial;
font-size: 11px;
margin-left: 5px;
margin-top: 5px;
}
.our_role_wrapper{
box-shadow: 1px 1px 11px 2px rgb(0 0 0 / 10%);
margin-top: 5px;
border-radius: 10px;
padding: 5px;
margin-left: 35px;
display: inline-block;
position: relative;
width: 525px;
height: 60px;
}
#team_vision{
width: 80%!important;
height: 83px!important;
}
.our_role_title{
color: #323896!important;
font-family: arial;
font-weight: bold;
font-size: 15px;
}
.title_wrapper_box{
height: 30px;
margin-left: 35px;
margin-top: 20px;
width: 70%-block;
position: relative;
}<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!-- J Query Library -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>
<!-- Main Content -->
<div class="main_container" id="welcome_container">
<div id="wrapperForMenus">
<div id="left_menu">
<h1 class="main_menu_title">Partner</h1>
<h1 class="main_menu_subtitle">Select Partner</h1>
<div class="row_left_menu_item">
<img class="left_menu_icons" src="">
<a id="epsBtn" class="inactiveLink"><h2 class="left_menu_title" id="">blah</h2></a>
</div>
<div class="row_left_menu_item">
<img class="left_menu_icons" src="">
<a id="enterpriseBtn" class="inactiveLink"><h2 class="left_menu_title" id="">Enterprise</h2></a>
</div>
<div class="row_left_menu_item">
<img class="left_menu_icons" src="">
<a id="consumerBtn" class="inactiveLink"><h2 class="left_menu_title" id="">lah lah</h2></a>
</div>
<div class="row_left_menu_item">
<img class="left_menu_icons" src="">
<a id="medBtn" class="inactiveLink"><h2 class="left_menu_title" id="">Med</h2></a>
</div>
<div class="row_left_menu_item">
<img class="left_menu_icons" src="">
<a id="pharmBtn" class="menuBtns"><h2 class="left_menu_title" id="pharma_left_menu">Pharmaceuticals</h2></a>
</div>
</div>
<div id="welcome_dashboard">
<div id="dashboard_menu">
<h1 class="dashboard_menu_title">Content</h1>
<h1 class="dashboard_menu_subtitle">Select Option below</h1>
<div class="dashboard_menu_row">
<h2 class="dashboard_menu_selection" style="margin-top: 100px;" >Please Select Partner</h2>
</div>
</div>
</div>
<div id="pharma_dashboard">
<div id="dashboard_menu">
<h1 class="dashboard_menu_title">Content</h1>
<h1 class="dashboard_menu_subtitle">Select Option below</h1>
<a id="pharma_OBtn" class="content_links" href="#toTopOverview">
<div class="dashboard_menu_row">
<h2 class="dashboard_menu_selection" id="pharma_default" >Overview</h2>
</div>
</a>
<a id="pharma_CKBtn" class="content_links" href="#toTopCK">
<div class="dashboard_menu_row">
<h2 class="dashboard_menu_selection" id="pharma_CK">Ck</h2>
</div>
</a>
<a id="pharma_TeamBtn" class="content_links" href="#toTopTeam">
<div class="dashboard_menu_row">
<h2 class="dashboard_menu_selection" id="pharma_Team">blah?</h2>
</div>
</a>
<a id="pharma_BPUAccessBtn" class="content_links" href="#toTopBPU">
<div class="dashboard_menu_row">
<h2 class="dashboard_menu_selection" id="pharma_BPUAccessOnly">BPU Access Only</h2>
</div>
</a>
<a id="pharma_TrainBtn" class="content_links" href="#toTopTrain">
<div class="dashboard_menu_row">
<h2 class="dashboard_menu_selection" id="pharma_Train">Training Materials</h2>
</div>
</a>
</div>
</div>
</div>
<!-- Column Right Has: Docs and Contact/Our Team -->
<div id="userProfileRight">
<div class="our_docs_wrapper">
<img src="" id="usersImage">
<div id="myProfileInfo">
<h2 id="info" class="info"> </h2>
<h2 id="profileJobTitle"> </h2>
</div>
<div class="our_docs_section">
<a target="_blank" id="delveIconLink"><img id="delveIcon" class="profileIcons" src=""></a>
<a target="_blank" id="oneDriveIconLink"><img id="oneDriveIcon" class="profileIcons" src=""></a>
</div>
</div>
</div>
<!-- Welcome Sector -->
<div id="welcome_canvas">
<div id="canvas" style="width:60%!important;">
<!-- Column Left Has: Greeting, Role, Functions Sections-->
<div class="column_left">
<!-- Greeting Section -->
<img id="welcomeIllustration" src="">
<div id="greeting_section_1">
<h1 id="greeting_section_title" class="center_text">Welcome</h1>
<p id="geeting_section_subTitle" class="center_text">Begin your journey by selecting a partner</p>
<div></div>
</div>
<div id="greeting_tutorial_message">
<h1 id="greeting_section_title" class="center_text">First time here?</h1>
<p id="geeting_section_subTitle" class="center_text">Begin Tutorial</p>
<div></div>
</div>
</div>
<!-- Canvas End -->
</div>
<!-- Canvas WRAPPER PER SECTOR End -->
</div>
<!-- *********************************** -->
<!-- ******** OVERVIEW SECTION ********* -->
<!-- *********************************** -->
<div id="canvas">
<div id="pharmaceuticals_canvas">
<h2> overview</h2>
</div>
</div>
<!-- *********************************** -->
<!-- ************ CK SECTION *********** -->
<!-- *********************************** -->
<div id="pharma_CK_canvas">
<a id="toTopCK"></a>
<h2>Ck</h2>
</div>
</div>
<!-- *********************************** -->
<!-- ************ Training Materials *********** -->
<!-- *********************************** -->
<div id="pharma_training_canvas">
<a id="toTopTrain"></a>
<h4>TRAINING<h4>
</div>
<!-- *********************************** -->
<!-- ************ ACCESS ONLY *********** -->
<!-- *********************************** -->
<div id="pharma_AO_canvas">
<a id="toTopBPU"></a>
</div>
<div id="access_denied_canvas">
</div>
<!-- *********************************** -->
<!-- ************ Quick Links *********** -->
<!-- *********************************** -->
<div id="pharma_QL_canvas">
<a id="toTopQL"></a>
<h2>QL<h2>
</div>
<!-- *********************************** -->
<!-- ************ Team *********** -->
<!-- *********************************** -->
<div id="pharma_team_canvas">
<a id="toTopTeam"></a>
</div>
<!-- Main Container End -->
</div>
</div>解决方案
推荐阅读
- jira - 来自 jiraissue 表中的受让人列的奇怪受让人名称
- python - 我正在尝试使用此 python 代码创建 wordcloud，但不断出错
- shell - 将日期/时间戳附加到现有文件
- sympy - 分段和最小/最大函数之间的 Sympy 转换
- go - Socket.io 服务器未使用 graarh/golang-socketio 实现从客户端接收消息
- c# - C# 使用 StringFormat 垂直对齐文本并向上对齐
- wordpress - 如何在不更改域且不丢失与该域链接的邮箱的情况下将网站从 wordpress 改版为 wix？
- javascript - 使用 nodejs 向微软团队频道发送消息
- python - Autoscraper 使用用户名和密码登录
- node.js - 根据 MongoDB 记录中的时间值在特定时间运行函数