分享
三行代码  ›  专栏  ›  技术社区  ›  tcarpenter17

向按钮添加键盘元素

  •  1
  • tcarpenter17  · 技术社区  · 6 天前

    .togglePL 并将其编码为展开或折叠页选择器 #pageList . 我想使用键盘元素展开或折叠页选择器 alt + p 不用点击按钮本身。我试着通过JS online和这里的问题来研究如何做到这一点,但没有成功。请查收所附代码,如有任何帮助将不胜感激。谢谢。

    // Toggle Page List
    $(document).ready(function() {
        $('.togglePL').click(function(e) {
            if ($('#pageList').width() == 40) {
                $('.textPL').show();
                $('#pageList').width(168);
                $('.togglePL').css({left:'192px', transform: 'none'});
                 $('#pageList a').css({fontSize:'10pt'});
            }
            else {
                $('.textPL').hide();
                $('#pageList').width(40);
                $('.togglePL').css({left:'64px', transform: 'rotate(180deg)', transitionDuration:'0.3s'});
                $('#pageList a').css({fontSize:'14pt'});
            }
        });
    });
    /*
    	~ Copyright (c) Summit Learning Management System (made by students, for students). 2020.
    */
    
    html > body {
    	height: 100%;
    	overflow: hidden;
    	margin: 0;
    	padding: 0;
    	font-family: "Trebuchet MS", sans-serif;
    }
    
    #wrapper {
    	display: flex;
    	flex-wrap: nowrap;
    	height: 100%;
    	min-height: 100vh;
    	overflow: hidden;
    	background: #555;
    }
    
    /* Navigation */
    #navigation {
    	display: flex;
    	flex-direction: column;
    	min-height: 100%;
    	width: 40px;
    	padding: 8px 0;
    	background: #1b315e;
    }
    
    #navigation > .spacer {
    	display: block;
    	margin: 120px 0 0 0;
    }
    
    #navigation > a {
    	display: block;
    	margin: 0;
    	padding: 28px 0;
    	text-align: center;
    	font-size: 18pt;
    	color: #fff;
    }
    
    #navigation > a.active {
    	color: #fff;
    	border-left: 2px solid #fff;
    	background: #2b417e;
    }
    
    #navigation > a:not(.active):hover {
    	color: #fff;
    	border-left: 2px solid #fff;
    	background: #2b417e;
    	opacity: 0.75;
    	transition-duration: 0.3s;
    }
    
    #navigation > .navLinks {
        cursor: inherit;
        display: block;
        margin: 0;
        height: 48px;
        background: none;
        border: none;
        outline: none;
        text-align: center;
        font-size: 14pt;
        color: #fff;
    }
    
    #navigation > .navLinks:hover {
        color: #fff;
        background: #2b417e;
        transition-duration: 0.3s;
    }
    
    /* Page List */
    #pageList {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        width: 168px;
        padding: 8px 0;
        justify-content: center;
        background: #2b417e;
    }
    
    #pageList > a {
        display: block;
        margin: 0;
        padding: 28px 0;
        text-transform: uppercase;
        text-decoration: none;
        text-align: center;
        font-size: 10pt;
        color: #fff;
    }
    
    #pageList > a.active {
        color: #fff;
        border-left: 2px solid #fff;
        background: #3b518e;
    }
    
    #pageList > a:not(.active):hover {
        color: #fff;
        border-left: 2px solid #fff;
        background: #3b518e;
        opacity: 0.75;
        transition-duration: 0.3s;
    }
    
    #pageList > .togglePL {
        display: block;
        position: absolute;
        top: 12px;
        left: 192px;
        height: 32px;
        width: 32px;
        background: #eee;
        border: 2px solid #999;
        border-radius: 100%;
        text-align: center;
        font-size: 10pt;
        color: #999;
    }
    <!doctype html>
    <!--
    	~ Copyright (c) Summit Learning Management System (made by students, for students). 2020.
    -->
    <html lang="en-AU"><head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
    	<title>Welcome - Summit</title>
    	<script src="https://kit.fontawesome.com/bec3ffe91b.js" crossorigin="anonymous"></script> <!-- External Font Stylesheet -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- External JQuery Script -->
    	<link rel="stylesheet" type="text/css" href="../CSS/setting.css"> <!-- Internal Stylesheet -->
    	<link rel="stylesheet" type="text/css" href="../CSS/styling.css"> <!-- Internal Stylesheet -->
    	<link rel="shortcut icon" href="#"> <!-- Favicon -->
    	</head>
    	<body>
    	<div id="wrapper">
    		
    		<!-- Navigation -->
    		<div id="navigation">
    			<div class="spacer"></div>
    			<a href="#" title="Home workspace" class="active"><i class="fal fa-home"></i></a>
    			<a href="#" title="Learning workspace"><i class="fal fa-book"></i></a>
    			<a href="#" title="Student management workspace"><i class="fal fa-user"></i></a>
    			<a href="#" title="Portal workspace"><i class="fal fa-globe"></i></a>
    			<a href="#" title="Administration workspace"><i class="fal fa-cog"></i></a>
    			<div class="spacer"></div>
    			<button title="Help" class="navLinks"><i class="fal fa-question-circle"></i></button>
    			<button title="Quick links" class="navLinks"><i class="fal fa-bookmark"></i></button>
    			<button title="Log out" class="navLinks"><i class="fal fa-sign-out-alt"></i></button>
    		</div>
            
            <!-- Page List -->
            <div id="pageList">
                <a href="#" title="Dashboard"><i class="fal fa-chart-line"></i> <span class="textPL">Dashboard</span></a>
                <a href="#" title="Summit messages"><i class="fal fa-comments"></i> <span class="textPL">Summit Messages</span></a>
                <a href="#" title="Help"><i class="fal fa-question-circle"></i> <span class="textPL">Help</span></a>
                <a href="#" title="Notices"><i class="fal fa-newspaper"></i> <span class="textPL">Notices</span></a>
                <a href="#" title="Timetable"><i class="fal fa-calendar-alt"></i> <span class="textPL">Timetable</span></a>
                <a href="#" title="Welcome" class="active"><i class="fal fa-hands-helping"></i> <span class="textPL">Welcome</span></a>
                <button title="Expand/collapse the page selectors [ alt + p ]" class="togglePL"><i class="fas fa-chevron-left"></i></button>
            </div>
    		
    		</div>
            
            <script src="../JS/setting.js" type="text/javascript"></script> <!-- Internal Script -->
            
    	</body>
    </html>
    1 回复  |  直到 6 天前
        1
  •  1
  •   prasanth    6 天前

    你可以这样做。在关键事件检查 keycode altkey 按下。然后触发菜单的单击事件

    if (e.altKey && keyCode == 80) 
    

    代码

    // Toggle Page List
    $(document).ready(function() {
        $('.togglePL').click(function(e) {
            if ($('#pageList').width() == 40) {
                $('.textPL').show();
                $('#pageList').width(168);
                $('.togglePL').css({left:'192px', transform: 'none'});
                 $('#pageList a').css({fontSize:'10pt'});
            }
            else {
                $('.textPL').hide();
                $('#pageList').width(40);
                $('.togglePL').css({left:'64px', transform: 'rotate(180deg)', transitionDuration:'0.3s'});
                $('#pageList a').css({fontSize:'14pt'});
            }
        });
    });
    
    $(document).on('keydown', function (e) {
            let keyCode = e.keyCode | e.which;
            if (e.altKey && keyCode == 80) {
               $('.togglePL').trigger('click')
            }
          })
    /*
    	~ Copyright (c) Summit Learning Management System (made by students, for students). 2020.
    */
    
    html > body {
    	height: 100%;
    	overflow: hidden;
    	margin: 0;
    	padding: 0;
    	font-family: "Trebuchet MS", sans-serif;
    }
    
    #wrapper {
    	display: flex;
    	flex-wrap: nowrap;
    	height: 100%;
    	min-height: 100vh;
    	overflow: hidden;
    	background: #555;
    }
    
    /* Navigation */
    #navigation {
    	display: flex;
    	flex-direction: column;
    	min-height: 100%;
    	width: 40px;
    	padding: 8px 0;
    	background: #1b315e;
    }
    
    #navigation > .spacer {
    	display: block;
    	margin: 120px 0 0 0;
    }
    
    #navigation > a {
    	display: block;
    	margin: 0;
    	padding: 28px 0;
    	text-align: center;
    	font-size: 18pt;
    	color: #fff;
    }
    
    #navigation > a.active {
    	color: #fff;
    	border-left: 2px solid #fff;
    	background: #2b417e;
    }
    
    #navigation > a:not(.active):hover {
    	color: #fff;
    	border-left: 2px solid #fff;
    	background: #2b417e;
    	opacity: 0.75;
    	transition-duration: 0.3s;
    }
    
    #navigation > .navLinks {
        cursor: inherit;
        display: block;
        margin: 0;
        height: 48px;
        background: none;
        border: none;
        outline: none;
        text-align: center;
        font-size: 14pt;
        color: #fff;
    }
    
    #navigation > .navLinks:hover {
        color: #fff;
        background: #2b417e;
        transition-duration: 0.3s;
    }
    
    /* Page List */
    #pageList {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        width: 168px;
        padding: 8px 0;
        justify-content: center;
        background: #2b417e;
    }
    
    #pageList > a {
        display: block;
        margin: 0;
        padding: 28px 0;
        text-transform: uppercase;
        text-decoration: none;
        text-align: center;
        font-size: 10pt;
        color: #fff;
    }
    
    #pageList > a.active {
        color: #fff;
        border-left: 2px solid #fff;
        background: #3b518e;
    }
    
    #pageList > a:not(.active):hover {
        color: #fff;
        border-left: 2px solid #fff;
        background: #3b518e;
        opacity: 0.75;
        transition-duration: 0.3s;
    }
    
    #pageList > .togglePL {
        display: block;
        position: absolute;
        top: 12px;
        left: 192px;
        height: 32px;
        width: 32px;
        background: #eee;
        border: 2px solid #999;
        border-radius: 100%;
        text-align: center;
        font-size: 10pt;
        color: #999;
    }
    <!doctype html>
    <!--
    	~ Copyright (c) Summit Learning Management System (made by students, for students). 2020.
    -->
    <html lang="en-AU"><head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
    	<title>Welcome - Summit</title>
    	<script src="https://kit.fontawesome.com/bec3ffe91b.js" crossorigin="anonymous"></script> <!-- External Font Stylesheet -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- External JQuery Script -->
    	<link rel="stylesheet" type="text/css" href="../CSS/setting.css"> <!-- Internal Stylesheet -->
    	<link rel="stylesheet" type="text/css" href="../CSS/styling.css"> <!-- Internal Stylesheet -->
    	<link rel="shortcut icon" href="#"> <!-- Favicon -->
    	</head>
    	<body>
    	<div id="wrapper">
    		
    		<!-- Navigation -->
    		<div id="navigation">
    			<div class="spacer"></div>
    			<a href="#" title="Home workspace" class="active"><i class="fal fa-home"></i></a>
    			<a href="#" title="Learning workspace"><i class="fal fa-book"></i></a>
    			<a href="#" title="Student management workspace"><i class="fal fa-user"></i></a>
    			<a href="#" title="Portal workspace"><i class="fal fa-globe"></i></a>
    			<a href="#" title="Administration workspace"><i class="fal fa-cog"></i></a>
    			<div class="spacer"></div>
    			<button title="Help" class="navLinks"><i class="fal fa-question-circle"></i></button>
    			<button title="Quick links" class="navLinks"><i class="fal fa-bookmark"></i></button>
    			<button title="Log out" class="navLinks"><i class="fal fa-sign-out-alt"></i></button>
    		</div>
            
            <!-- Page List -->
            <div id="pageList">
                <a href="#" title="Dashboard"><i class="fal fa-chart-line"></i> <span class="textPL">Dashboard</span></a>
                <a href="#" title="Summit messages"><i class="fal fa-comments"></i> <span class="textPL">Summit Messages</span></a>
                <a href="#" title="Help"><i class="fal fa-question-circle"></i> <span class="textPL">Help</span></a>
                <a href="#" title="Notices"><i class="fal fa-newspaper"></i> <span class="textPL">Notices</span></a>
                <a href="#" title="Timetable"><i class="fal fa-calendar-alt"></i> <span class="textPL">Timetable</span></a>
                <a href="#" title="Welcome" class="active"><i class="fal fa-hands-helping"></i> <span class="textPL">Welcome</span></a>
                <button title="Expand/collapse the page selectors [ alt + p ]" class="togglePL"><i class="fas fa-chevron-left"></i></button>
            </div>
    		
    		</div>
            
            <script src="../JS/setting.js" type="text/javascript"></script> <!-- Internal Script -->
            
    	</body>
    </html>