网站开发新手,非常感谢您的建议!对于我正在创建的这个应用程序,我有多个部分在点击时出现和消失,我只是不断地为每个可能的按钮点击写出 hide()、hide()、hide()、show()。我知道必须有一种更清洁更有效的写作方式!有人有什么建议吗?
请注意(点击按钮时也需要删除类)不确定这是否有很大的不同。
$( document ).ready(function() {
var pharmaCanvas = document.getElementById('pharmaceuticals_canvas');
var welcomeCanvas = document.getElementById('welcome_canvas');
var CK_canvas = document.getElementById('pharma_CK_canvas');
var QL_canvas = document.getElementById('pharma_QL_canvas');
$(pharmaCanvas).hide();
$(pharma_dashboard).hide();
$(pharma_CK_canvas).hide();
$(QL_canvas).hide();
$('.menuBtns').click(function(){
//This will decrease the left menu size on click//
$("#left_menu").toggleClass("menu_decrease");
$(".left_menu_title").toggleClass("menu_decrease_title");
});
$('#pharmBtn').click(function(){
//Opens up Overview, as default
$(pharmaCanvas).fadeToggle(2000);
//opens up the PHARMA Dashboard / Right Dashboard //
$(pharma_dashboard).toggle();
//Toggles the WELCOME Dashboard which is not secific to any sector's dashboard//
$(welcome_dashboard).toggle();
//The secondary menu/ dashboard menu item will turn grey //
$("#pharma_default").addClass("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 all other canvases//
$(welcomeCanvas).hide();
$(pharma_CK_canvas).hide();
$(pharma_QL_canvas).hide();
$(welcomeCanvas).hide();
})
//Start Dashboard Journey Here//
$('#pharma_OBtn').click(function(){
$(pharmaCanvas).toggle();
$("#pharma_default").addClass("selected_item_grey");
$("#pharma_CK").removeClass("selected_item_grey");
$(pharma_CK_canvas).hide();
$(welcomeCanvas).hide();
$(pharma_QL_canvas).hide();
})
$('#pharma_CKBtn').click(function(){
$(pharma_CK_canvas).toggle();
$("#pharma_CK").addClass("selected_item_grey");
$("#pharma_default").removeClass("selected_item_grey");
$("#pharma_QL").removeClass("selected_item_grey");
$("#left_menu").addClass("");
$(pharmaCanvas).hide();
$(pharma_QL_canvas).hide();
})
$('#pharma_QLBtn').click(function(){
$(QL_canvas).toggle();
$("pharma_QL").addClass("selected_item_grey");
$("#pharma_default").removeClass("selected_item_grey");
$("#pharma_CK").removeClass("selected_item_grey");
$(pharmaCanvas).hide();
$(pharma_CK_canvas).hide();
})
});
/* Main Section */
.main_container{
/*
width:1260px;
height: 470px;
*/
}
#canvas{
display: inline-block;
}
.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;
}
/*
::-webkit-scrollbar {
width: 10px;
background: white;
}*/
/* Track
::-webkit-scrollbar-track {
border-radius: 10px;
}
Handle
::-webkit-scrollbar-thumb {
background: #dbdbdb;
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
Handle on hover
::-webkit-scrollbar-thumb:hover {
background: #b1b0b0;
}
*/
/* Menus */
#left_menu{
height: 100vh;
width: 200px;
float: left;
background-color: #323896;
}
.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;
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;
}
.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;
}
<html lang="en-US">
<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>
<!-- SPServices -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.jqueryui.min.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="/SiteAssets/jquery.SPServices-2013.02a.js" type="text/javascript"></script>
<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/jquery-1.7.1.min.js" type="text/javascript"></script>
<div class="main_container" id="welcome_container">
<div id="wrapperForMenus">
<div id="left_menu">
<h1 class="main_menu_title">Sector</h1>
<h1 class="main_menu_subtitle">Select Sector</h1>
<div class="row_left_menu_item">
<img class="left_menu_icons" src="">
<a id="epsBtn" class="menuBtns"><h2 class="left_menu_title" id="">DONT CLICK</h2></a>
</div>
<div class="row_left_menu_item">
<img class="left_menu_icons" src="">
<a id="enterpriseBtn" class="menuBtns"><h2 class="left_menu_title" id="">DONT CLICK</h2></a>
</div>
<div class="row_left_menu_item">
<img class="left_menu_icons" src="">
<a id="consumerBtn" class="menuBtns"><h2 class="left_menu_title" id="">DONT CLICK</h2></a>
</div>
<div class="row_left_menu_item">
<img class="left_menu_icons" src="">
<a id="medBtn" class="menuBtns"><h2 class="left_menu_title" id="">DONT CLICK</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">CLICK ME!!</h2></a>
</div>
</div>
<div id="welcome_dashboard">
<div id="dashboard_menu">
<h1 class="dashboard_menu_title">Index</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 Sector to Display Options</h2>
</div>
</div>
</div>
<div id="pharma_dashboard">
<div id="dashboard_menu">
<h1 class="dashboard_menu_title">BPU Index</h1>
<h1 class="dashboard_menu_subtitle">Select Option below</h1>
<a id="pharma_OBtn">
<div class="dashboard_menu_row">
<h2 class="dashboard_menu_selection" id="pharma_default">Overview</h2>
</div>
</a>
<a id="pharma_CKBtn">
<div class="dashboard_menu_row">
<h2 class="dashboard_menu_selection" id="pharma_CK">CK</h2>
</div>
</a>
<a id="pharma_TrainBtn">
<div class="dashboard_menu_row">
<h2 class="dashboard_menu_selection" id="pharma_Train">NOT ACTIVE YET</h2>
</div>
</a>
<a id="pharma_TeamBtn">
<div class="dashboard_menu_row">
<h2 class="dashboard_menu_selection" id="pharma_Team">NOT ACTIVE YET</h2>
</div>
</a>
<a id="pharma_QLBtn">
<div class="dashboard_menu_row">
<h2 class="dashboard_menu_selection" id="pharma_QL">QL</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="welcome_canvas">
<h1> Welcome Canvas At Start </h1>
</div>
<div id="pharmaceuticals_canvas">
<h1> default section</h1>
</div>
<div id="pharma_CK_canvas">
<h1> hi CK </h1>
</div>
<div id="pharma_QL_canvas">
<h1> hi QL </h1>
</div>
<!-- Main Container End -->
</body>
</html>
答案 0 :(得分:1)
这很可能不是您正在寻找的内容,但它是我在评论中建议的实现:
var pharmaCanvas = document.getElementById('pharmaceuticals_canvas');
var welcomeCanvas = document.getElementById('welcome_canvas');
var CK_canvas = document.getElementById('pharma_CK_canvas');
var QL_canvas = document.getElementById('pharma_QL_canvas');
var elementList = [pharmaCanvas, welcomeCanvas, CK_canvas, QL_canvas, '#pharma_default', '#pharma_left_menu', '#pharma_CK'];
function toggleOrHide(toggle, list) {
for (let element of list) {
if (element === toggle) {
$(element).toggle();
} else {
$(element).hide();
}
}
}
$('#pharma_OBtn').click(function(){
toggleOrHide(pharmaCanvas, elementList);
})
您的大部分函数似乎都是 toggle one element, hide all the other ones
,所以如果您能够始终如一地保持这种状态,那么您就可以创建一个为您完成这项工作的函数。