Question

我面临基于Bootstrap的下拉菜单的问题（没什么特别的，只是一个导航）。一切顺利，但是当我想通过点击它来折叠下拉列表时，它会消失，但是当我悬停或再次点击它时会显示。我已经阅读了一些关于stopPropagation（）函数的线程，但它仍然无效。这是我的代码。

                        <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="Matt O'Such">

        <title></title>
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

        <style>
        body { 
        background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.8)), url("images/background-homepage.jpg");
        background-image: -moz-linear-gradient(top, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.8)), url("images/background-homepage.jpg");
        background-image: -o-linear-gradient(top, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.8)), url("images/background-homepage.jpg");
        background-image: -ms-linear-gradient(top, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.8)), url("images/background-homepage.jpg");
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(51, 51, 51, 0.8)), to(rgba(51, 51, 51, 0.8))), url("images/background-homepage.jpg");
        background-image: -webkit-linear-gradient(top, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.8)), url("images/background-homepage.jpg");
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background-homepage.jpg', sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background-homepage.jpg', sizingMethod='scale')";
        }

        .navbar-default .navbar-nav>li>a
        {
        color:#e6e6e6;
        font-size:11px;
        padding-top:22px;
        }

        .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
        color:#f9f9f9;
        background:#2f2b2e;
        border-bottom:2px solid #bfff51;
        font-size:11px;
        }

        .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
        color:#f9f9f9;
        background:#2f2b2e;
        border-bottom:2px solid #bfff51;
        font-size:11px;
        }

        .dropdown-menu>li>a {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: 400;
        line-height: 1.42857143;
        color: #fefefe;
        white-space: nowrap;
        background:#4c4649;
        font-size:11px;
        }

        .dropdown-menu {
        position:absolute;
        padding:0px;
        border-radius:0px;
        border:0px;
        min-width:0;
        background:red;font-size:11px;

        }

        .wrapper {
        }

        .homepage-welcome {
        font-family:Lobster;
        font-size:2em;
        color:#fefefe;}

        .homepage-title{
        font-family:'Open Sans';
        font-size:3em;
        color:#fefefe;}
        }

        </style>

        <script>
        $(document).ready(function () {
            //$(".nav li").removeClass("active");
            $('.menu-item-home').addClass('active');
            //for demo
            //$('#demo').addClass('active');
            //for sale 
            //$('#sale').addClass('active');
            $('.dropdown-menu input').click(function(e) {
                e.stopPropagation();
            });
            });
        </script>
    </head>
    <body>
        <div class="wrapper">
            <nav class="navbar navbar-default" style="border-radius:0px;background:none;border:0px;">
                <div class="container-fluid" style="">
                    <div class="row">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                            </button>
                            <a title "Matt's portfolio - go to homepage" style="margin-left:20px;margin-top:2px;" class="navbar-brand page-scroll" href="#"><img alt="Matt's portfolio logo" src="images/wm-logo.png" /></a>
                        </div>

                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav navbar-right" style="text-transform:uppercase;margin-right:20px;">
                                <li class="menu-item-home">
                                    <a href="/home">Home</a>
                                </li>
                                <li class="dropdown">
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Projects <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                      <li><a href="/projects/graphics">Graphics</a></li>
                                      <li><a href="/projects/websites">Websites</a></li>
                                      <li><a href="/projects/others">Others</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="/about">About</a>
                                </li>
                                <li>
                                    <a href="/contact">Contact</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2 text-center">
                        <h3 class="homepage-welcome">My name is Matt and this is my portfolio. </h3>
                    <h1 class="homepage-title">I make the Internet a better place.</h1>
                    <p>Passionate about People. Targeted on feelings and relationships. <br />Charmed by modern, frontend technologies.</p>
                </div>
            </div>          
        </div>
    </div>      
</body>

Answer 1

由于你的代码和问题不太明确，但我仍然试图根据你的问题的一些理解来回答你的问题。

案例-1：

我认为您不想在点击下拉菜单中的任何项目时隐藏下拉菜单，因为您已经为此编写了一些脚本。但是您添加了“输入”标记，该标记不应该存在，因为下拉菜单中没有“输入”标记。使用以下脚本

 $('.dropdown-menu').click(function(e) {

         e.stopPropagation();
   });

案例-2：

如果您不想在点击下拉按钮时隐藏下拉菜单，只需删除“数据切换”属性，因为每次点击按钮时都会切换下拉菜单。

<li class="dropdown" id="dropDownBtn">
     <a class="dropdown-toggle" href="#">Projects <span class="caret"></span></a>
     <ul class="dropdown-menu">
         <li><a href="/projects/graphics">Graphics</a></li>
         <li><a href="/projects/websites">Websites</a></li>
         <li><a href="/projects/others">Others</a></li>
     </ul>
</li>

并添加以下脚本

 $("#dropdownBtn").on('click',function(){

            $(this).parent().addClass('open');
 });

$(document).on('click',function(el){
    if(el.target.id != "dropdownBtn"){ //give some condition which suits your code

                $('.dropdown').removeClass('open');
            }
});

情况下-3：正如您所提到的那样，您希望通过单击它来折叠下拉列表。我不明白这一点，因为这是bootstrap的正常行为。但是如果你想只显示一次下拉列表，那么你可以在case-2中使用 one（）方法

$("#dropdownBtn").one('click',function(){

            $(this).parent().addClass('open');
 });

让我知道哪种情况适合你，如果上述两种情况都没有帮助你，那么请清楚问题，我很感谢帮助你。：）

Answer 2

$(document).ready(function () {
            //$(".nav li").removeClass("active");
            $('.menu-item-home').addClass('active');
            //for demo
            //$('#demo').addClass('active');
            //for sale 
            //$('#sale').addClass('active');
            $('.dropdown-menu input').click(function(e) {
                e.stopPropagation();
            });
            });
        </script>

 body { 
        background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.8)), url("images/background-homepage.jpg");
        background-image: -moz-linear-gradient(top, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.8)), url("images/background-homepage.jpg");
        background-image: -o-linear-gradient(top, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.8)), url("images/background-homepage.jpg");
        background-image: -ms-linear-gradient(top, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.8)), url("images/background-homepage.jpg");
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(51, 51, 51, 0.8)), to(rgba(51, 51, 51, 0.8))), url("images/background-homepage.jpg");
        background-image: -webkit-linear-gradient(top, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.8)), url("images/background-homepage.jpg");
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background-homepage.jpg', sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background-homepage.jpg', sizingMethod='scale')";
        }

        .navbar-default .navbar-nav>li>a
        {
        color:#e6e6e6;
        font-size:11px;
        padding-top:22px;
        }

        .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
        color:#f9f9f9;
        background:#2f2b2e;
        border-bottom:2px solid #bfff51;
        font-size:11px;
        }

        .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
        color:#f9f9f9;
        background:#2f2b2e;
        border-bottom:2px solid #bfff51;
        font-size:11px;
        }

        .dropdown-menu>li>a {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: 400;
        line-height: 1.42857143;
        color: #fefefe;
        white-space: nowrap;
        background:#4c4649;
        font-size:11px;
        }

        .dropdown-menu {
        position:absolute;
        padding:0px;
        border-radius:0px;
        border:0px;
        min-width:0;
        background:red;font-size:11px;

        }

        .wrapper {
        }

        .homepage-welcome {
        font-family:Lobster;
        font-size:2em;
        color:#fefefe;}

        .homepage-title{
        font-family:'Open Sans';
        font-size:3em;
        color:#fefefe;}
        }

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<body>
        <div class="wrapper">
            <nav class="navbar navbar-default" style="border-radius:0px;background:none;border:0px;">
                <div class="container-fluid" style="">
                    <div class="row">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                            </button>
                            <a title "Matt's portfolio - go to homepage" style="margin-left:20px;margin-top:2px;" class="navbar-brand page-scroll" href="#"><img alt="Matt's portfolio logo" src="images/wm-logo.png" /></a>
                        </div>

                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav navbar-right" style="text-transform:uppercase;margin-right:20px;">
                                <li class="menu-item-home">
                                    <a href="/home">Home</a>
                                </li>
                                <li class="dropdown">
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Projects <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                      <li><a href="/projects/graphics">Graphics</a></li>
                                      <li><a href="/projects/websites">Websites</a></li>
                                      <li><a href="/projects/others">Others</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="/about">About</a>
                                </li>
                                <li>
                                    <a href="/contact">Contact</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2 text-center">
                        <h3 class="homepage-welcome">My name is Matt and this is my portfolio. </h3>
                    <h1 class="homepage-title">I make the Internet a better place.</h1>
                    <p>Passionate about People. Targeted on feelings and relationships. <br />Charmed by modern, frontend technologies.</p>
                </div>
            </div>          
        </div>
    </div>      
</body>

如你所见，它在这里正常工作检查你的JQuery

两次点击

2 个答案: