时间戳

首页 > 解决方案 > 使用 jquery 选择项目后是否可以关闭菜单？

javascript - 使用 jquery 选择项目后是否可以关闭菜单？

问题描述

我希望在从菜单中选择一个项目后，后者关闭以显示所需的部分

JS代码：

$('#toggle').click(function(){
        $(this).toggleClass('active');
        $('#overlay').toggleClass('open');
     });

HTML 代码：

    <!DOCTYPE html>
     <html lang="en">
     <html>
     <head>
        <meta charset='UTF-8'/>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
        <link rel="icon" type="image/gif" href="images/animated_favicon1.gif">
        <title>Piero Sabino</title>
        <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Pacifico&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="style.css" type="text/css" />
        <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
        <meta name="keywords" content="HTML5, CSS3">
        <meta name="author" content="Piero Sabino">
        <meta name="description" content="My website">
    </head>
    <body>
        
       
   
    <div class='container'>
      <!--  HEADER  -->  
        <header id='about'>             
         <!-- ABOUT-->
            <div class='content-wrap'>
                <img class='profile-img col narrow' src='images/Piero Sabino.jpeg'>
                <div class='col-wide'>
                    <h1>Piero Sabino</h1>
                    <p>Hi, my name's Piero Sabino, I'm 30 years old and live in Turi, Puglia. I have been passionate about website development since I went to school and today I decided to enroll the web programming course Start2impact to deepen my Web apps development skills and, at the same time, to become a full-stack developer, a figure sought after by companies operating on the web. Some time ago I took an online course about the Swift programming language. I like football and in my spare time I read or repair damaged objects.
                    </p>    
                </div>
            </div>
            <!-- END OF ABOUT  --> 
        </header>
        <!-- END OF HEADER -->


        <main>
            <!-- PROJECTS-->
            <section id='projects'>
                <div class='content-wrap'>
                    <h2>PROJECTS</h2>
                    <h3>Work in progress</h3>
                </div>
            </section>
            <!-- END OF PROJECTS -->

            <!-- CONTACT-->
            <section id='contact'>
                <div class='content-wrap'>
                    <div class='contacts'>
                        <h2>CONTACT</h2>
                        <form action='' method='get'>
                            <label for='name'>Name:</label><br />
                            <input id='name' type='text' name='name' placeholder='John Doe'/><br/>
                            <label for='email'>E-mail:</label><br/>
                            <input id='email' type='email' name='email' placeholder='john.doe@example.com'/><br />
                            <label for='message'>Message:</label><br/>
                            <textarea id='message' name='message' rows='10' cols='30' placeholder='Leave your message here...'></textarea><br/>
                            <button id='submit' value='submit' class='btn'>Send</button>
                        </form>
                    </div><br/>
                    <p>Or </p><br/>
                    <div class='email'>
                        <p>Send an e-mail to:<address><a href='mailto:piero.sa@icloud.com'>piero.sa@icloud.com</a></address></p>
                    </div>
                </div>     
                
            </section>
            <!-- END OF CONTACT-->

            <!--FOOTER-->
            <footer>
                <div class='content-wrap'>
                  <div class='footer'>
                        <p>Created by Piero Sabino &copy; 2020</p>
                        <a href='https://www.facebook.com/sabino.piero' target='_blank'><img src='images/social_facebook_box_blue_256_30649.png'/></a>
                        <a href='https://www.instagram.com/p13rr390/' target='_blank'><img src='images/3721672-instagram_108066.png'/></a>
                        <a href='https://www.linkedin.com/in/piero-sabino-15a1b671/' target='_blank'><img src='images/sociallinkedin_member_2751.png'/></a>
                        <a href='https://github.com/pierre1590' target='_blank'><img src='images/github-logo_icon-icons.com_73546.png'/></a>
                  </div>
                </div>
            </footer>  
            <!-- END OF FOOTER-->
        </main>  
    </div>     
 
    <div id="toggle" class="button_container">
        <span class="top"></span>
        <span class="middle"></span>
        <span class="bottom"></span>
    </div>


      <div id="overlay" class="overlay">
        <nav class="overlay-menu">
            <ul>
                <li>
                    <a  href='#about'>About</a>
                </li>
                <li>
                    <a  href='#projects'>Projects</a>
                </li>
                 <li>
                    <a  href='#contact'>Contact</a>
                </li>
            </ul>
      </nav>
    </div>
    <script src='scripts/menu.js' type='text/javascript'></script>
   </body>
</html>

我想在从菜单本身中选择一个项目后关闭菜单，例如，如果我选择“关于”项目，菜单必须关闭向我显示所需的部分。例如，如果我点击关于链接，它必须显示我的描述。

标签： javascripthtmljquerycss

解决方案

尽管您的问题并不完全清楚您想要什么，但正如我对您的问题所了解的那样，您想要这样的东西，所以创建一个这样的自定义选择，并显示所选项目

function DropDown(el) {
        this.dd = el;
        this.placeholder = this.dd.children('span');
        this.opts = this.dd.find('ul.dropdown-at > li');
        this.val = '';
        this.index = -1;
        this.initEvents();
    }
    DropDown.prototype = {
        initEvents: function() {
            var obj = this;

            obj.dd.on('click', function(event) {
                $(this).toggleClass('active');
                return false;
            });

            obj.opts.on('click', function() {
                var opt = $(this);
                obj.val = opt.text();
                obj.index = opt.index();
                obj.placeholder.text(obj.val);
            });
        },
        getValue: function() {
            return this.val;
        },
        getIndex: function() {
            return this.index;
        }
    }

    $(function() {

        var dd = new DropDown($('#dd'));

        $(document).click(function() {
            $('.wrapper-dropdown-3').removeClass('active');
        });

    });
* {
    	box-sizing: border-box;
    	padding: 0;
    	margin: 0;
    }
    .wrapper-dropdown {
        position: relative;
        display: inline-block;
    }
    .wrapper-dropdown > span {
	    display: inline-block;
	    padding: 2px 10px;
	    border: 1px solid;
    }
    .dropdown-at {
        position: absolute;
        width: 100%;
        left: 0;
        list-style: none;
        padding: 0;
        display: none;
    }
    .wrapper-dropdown.active .dropdown-at {
    	display: block;
    	border: 1px solid;
    	border-top: 0;
    } 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dd" class="wrapper-dropdown" tabindex="1">
        <span>option 1</span>
        <ul class="dropdown-at">
            <li><a href="#">option 1</a></li>
            <li><a href="#">option 2</a></li>
            <li><a href="#">option 3</a></li>
        </ul>
    </div>

推荐阅读