编写多个隐藏显示 jquery 函数的更简洁方法？

Question

网站开发新手，非常感谢您的建议！对于我正在创建的这个应用程序，我有多个部分在点击时出现和消失，我只是不断地为每个可能的按钮点击写出 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>

Answer 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，所以如果您能够始终如一地保持这种状态，那么您就可以创建一个为您完成这项工作的函数。