Fatal编程技术网
  • javascript/
  • Javascript Bootstrap 4-隐藏导航栏折叠是可行的，但链接不是'；行不通

Javascript Bootstrap 4-隐藏导航栏折叠是可行的，但链接不是'；行不通

javascript jquery html css twitter-bootstrap

Javascript Bootstrap 4-隐藏导航栏折叠是可行的，但链接不是'；行不通,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我有一个导航栏，当屏幕宽度减小到某个点时，它会折叠为移动菜单，默认行为在选择导航链接后不会隐藏菜单，最终会隐藏页面上的内容 我发现有人试图让它自动隐藏，所以我在我的引导4的中添加了data toggle=“collapse”data target=“.nav collapse.show”，上面链接的答案无法正常工作，将自动关闭菜单，但href=“#where”完全被忽略 在上面的codeply示例中，当我发现类似问题的告诉人们添加Javascript而不是编辑html时，由于我是Bootstra

我有一个导航栏，当屏幕宽度减小到某个点时，它会折叠为移动菜单，默认行为在选择导航链接后不会隐藏菜单，最终会隐藏页面上的内容

我发现有人试图让它自动隐藏，所以我在我的
引导4的
中添加了
data toggle=“collapse”data target=“.nav collapse.show”
，上面链接的答案无法正常工作，将自动关闭菜单，但
href=“#where”
完全被忽略

在上面的codeply示例中，当我发现类似问题的
告诉人们添加Javascript而不是编辑html时，由于我是Bootstrap新手，我完全不知道将Javascript放在哪里

我目前正在尝试的浏览器是Linux上的Chromium

如何使菜单在单击时隐藏，并使链接实际被遵循

编辑：这是我的完整代码（我编辑了我的个人信息）：



文件夹

    

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 


我的投资组合

占位符文本

关于我

Lorem ipsum Door sit amet，是一位杰出的领导者。杜伊斯维韦拉梅特斯。前庭同侧，ac尊严自由。Morbi vel tortor hendrerit，mattis nunc ut，ornare dolor。波特托尔、佩伦特式面部按摩的奥古斯、莫里斯·福西布斯·洛雷姆、埃吉特·汀西顿·尼西和阿梅特·乌尔纳。在直径处执行欧盟自由等级临时协议。粗制滥造的非purus-vel-concertetur。塞德·埃吉特·莫莱斯蒂·利奥。但权杖是非侵权的，非侵权的。Nunc是一个自由指控机构。埃蒂亚姆·奥纳雷（Etiam ornare），猫咪坐在阿梅特·费吉亚·朗卡斯（Feit feugiat rhoncus），是佩伦特斯·莫里斯（nulla pellentesque mauris），欧盟的秃鹫则是自由女神（lectus vel diam）。从同侧到同侧。权杖，多洛尔·欧·马蒂斯·阿利奎姆，尼布·拉库斯·菲尼布斯·莱克图斯，我的时间和我的身体。掌跖斜颈。梅塞纳斯·拉西尼亚·波特提托·莫莱斯蒂。这是普尔文纳尔教堂的多洛教堂。这是一个很好的例子

技能和知识

Lorem ipsum Door sit amet，是一位杰出的领导者。这是一个很好的例子，它是一个很好的例子。Nunc id安特门。多奈克拍卖行、欧莱姆·欧莱菲特·迪格森、精英无牌康格安特、康格设施奥古斯·埃拉特·里索斯。无便利。这是你的生活。Morbi Volatic sem vitae ex mattis molestie tristique vitae magna。这是一个很好的例子。这是一个很好的例子。阿利奎姆·普鲁斯·奥奇，法雷特拉·奥托尔·维勒，波苏尔·维库拉·伊普苏姆

文件夹

我参与过的一些项目可以在我的网站上找到

简历

我的简历链接将在未来出现

联系方式

我的电话号码和电子邮件将来会在这里

window.jQuery | | document.write（“”）

在bootstrap.js（以及obvs-collapse.js）中有以下代码块：



$（文档）。在（Event.CLICK_DATA_API，Selector.DATA_TOGGLE，function（Event）{
event.preventDefault（）；
var target=Collapse.\u获取目标元素（this）；
var数据=$（目标）.data（数据\u键）；
var config=data？'toggle'：$（this.data（）；
Collapse.\u jQueryInterface.call（$（目标），config）；

});为您的引导扩展创建自己的javascript文件。示例init.js在bootstrap.js和jquery之后包含它，并在init中执行一些操作。。希望它能帮助其他人


$(document).on('click','.navbar-collapse.show',function(e) {
    if( $(e.target).is('a') ) {
        $(this).collapse('hide');
    }
});



请共享您的代码我目前正在移动，我会尽快将我的代码添加到问题中。@athimohan我已添加了html文件，并进行了一些小的编辑以删除我的个人信息。对不起，应该提到这是Bootstrap v4.0.0-alpha.6

<a class="nav-link" href="#about-us">About</a>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!--<link rel="icon" href="../../favicon.ico">-->

    <title>Portfolio</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <link href="style.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#menuNavbar" aria-controls="menuNavbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">My Portfolio</a>

        <div class="collapse navbar-collapse" id="menuNavbar">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#" data-toggle="collapse" data-target="#menuNavbar.show">Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about" data-toggle="collapse" data-target="#menuNavbar.show">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#skills" data-toggle="collapse" data-target="#menuNavbar.show">Skills/knowledge</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="portfolio-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Portfolio</a>
                    <div class="dropdown-menu" aria-labelledby="portfolio-dropdown">
                        <a class="dropdown-item" href="https://github.com/username/repo1">repo1</a>
                        <a class="dropdown-item" href="https://github.com/username/repo2">repo2</a>
                        <a class="dropdown-item" href="https://github.com/username/repo3">repo3</a>
                        <a class="dropdown-item" href="#portfolio" data-toggle="collapse" data-target="#menuNavbar.show">More</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#resume" data-toggle="collapse" data-target="#menuNavbar.show">Résumé</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact" data-toggle="collapse" data-target="#menuNavbar.show">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container">

        <div class="introduction" id="home">
            <h1>My Portfolio</h1>
            <p class="lead">Placeholder text</p>
        </div>

        <div class="about-me" id="about">
            <h2>About Me</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula viverra metus. Etiam in vestibulum ipsum, ac dignissim libero. Morbi vel tortor hendrerit, mattis nunc ut, ornare dolor. Ut porttitor, augue in pellentesque facilisis, massa mauris faucibus lorem, eget tincidunt nisi massa sit amet urna. Donec eu libero vel nisl tempor ultrices at at diam. Cras pellentesque non purus vel consectetur. Sed eget molestie leo. Ut scelerisque nibh non tortor congue, non suscipit augue congue. Nunc suscipit libero accumsan facilisis vulputate. Etiam ornare, felis sit amet feugiat rhoncus, est nulla pellentesque mauris, eu vulputate est lectus vel diam. Maecenas vel congue ipsum. Etiam scelerisque, dolor eu mattis aliquam, nibh lacus finibus lectus, quis tempus dui turpis nec purus. Curabitur vel tortor ipsum. Maecenas lacinia porttitor molestie. Ut pulvinar dolor at risus consectetur pulvinar. Fusce posuere mauris ut dui scelerisque vulputate.</p>
        </div>

        <div class="skills-knowledge" id="skills">
            <h2>Skills and Knowledge</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam quam, consectetur volutpat nibh at, sagittis mollis nulla. Nunc id porta ante. Donec auctor, lorem eu efficitur dignissim, elit nulla congue ante, congue facilisis augue erat id risus. Nulla facilisi. Ut vitae consequat erat. Morbi volutpat sem vitae ex mattis molestie tristique vitae magna. Phasellus egestas rhoncus justo quis tincidunt. Nunc sed enim congue, posuere lectus et, placerat tortor. Aliquam purus orci, pharetra a tortor vel, posuere vehicula ipsum.</p>
        </div>

        <div class="portfolio" id="portfolio">
            <h2>Portfolio</h2>
            <p class="lead">Some projects I have worked on can be found on my <a href="https://github.com/username">GitHub</a>.</p>
        </div>

        <div class="resume" id="resume">
            <h2>Résumé</h2>
            <p class="lead">A link to my résumé will be here in the future.</p>
        </div>

        <div class="contact-info" id="contact">
            <h2>Contact Info</h2>
            <p class="lead">My phone number and email will be here in the future.</p>
        </div>

    </div><!-- /.container -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="js/bootstrap.js"></script>
</body>
</html>



$(document).on('click','.navbar-collapse.show',function(e) {
    if( $(e.target).is('a') ) {
        $(this).collapse('hide');
    }
});