JQuery 单击导航栏切换按钮后搜索按钮不起作用

Question

在我的导航栏上有搜索和切换按钮。当我单击搜索按钮时 ->jQuery onclick 工作正常。但是，在我单击 navbar-toggle（菜单按钮）后，搜索按钮不起作用。我想阻止控制的切换按钮无法停止它..请帮助我..

$(document).ready(function() {
    $('.navbar a.dropdown-toggle').on('click', function(e) {
        var $el = $(this);
        var $parent = $(this).offsetParent(".dropdown-menu");
        $(this).parent("li").toggleClass('open');

        if(!$parent.parent().hasClass('nav')) {
            $el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4});
        }

        $('.nav li.open').not($(this).parents("li")).removeClass("open");

        return false;
    });
    
     $('#search-button').on('click', function(event) {
  
        $('#search').addClass('open');
  $('#search input[type="search"]').val("");
        //$('#search input[type="search"]').focus();
  
     });    
     $('#search, #search button.close').on('click keyup', function(event) {
        if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
            $(this).removeClass('open');
        }
    });
    });

.navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px;
 }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
  margin-top: 20px;
 }
 .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .collapse.in{
    display:block !important;
 }
 .navbar-custom-search .glyphicon-search{
    color:#333;
    position: relative;
    display: block;
    float: right;
    padding: 15px 15px;

    margin-right: 25px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 0;
    width: 25px; 
    font-size: 1.5em
    }

    .navbar-custom-search .glyphicon-search:hover{ 
    color:gray;
    }
    #search {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
 z-index: 3000;
    
    -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;

    -webkit-transform: translate(0px, -100%) scale(0, 0);
 -moz-transform: translate(0px, -100%) scale(0, 0);
 -o-transform: translate(0px, -100%) scale(0, 0);
 -ms-transform: translate(0px, -100%) scale(0, 0);
 transform: translate(0px, -100%) scale(0, 0);
    
    opacity: 0;
    }

    #search.open {
    -webkit-transform: translate(0px, 0px) scale(1, 1);
    -moz-transform: translate(0px, 0px) scale(1, 1);
 -o-transform: translate(0px, 0px) scale(1, 1);
 -ms-transform: translate(0px, 0px) scale(1, 1);
 transform: translate(0px, 0px) scale(1, 1); 
    opacity: 1;
    }
    #search .search-form-block{
    width: 90%;
    margin:10% auto;
    }

    #search input[type="search"] {        
    width: 85%;
    color: rgb(255, 255, 255);
    background: rgba(0, 0, 0, .3);
    font-size: 1.8em;
    font-weight: 300;
    text-align: center;
    border: 1px solid;    
    border-color: #999;
    box-shadow: 
        0 0 0px rgba(0,0,0,0.1),
        0px 0px 0px rgba(0,0,0,0.1);
    border-radius: 3px;
    -webkit-transition: color 0.3s ease-out;
    -moz-transition: color 0.3s ease-out;
    -ms-transition: color 0.3s ease-out;
    -o-transition: color 0.3s ease-out;
    transition: color 0.3s ease-out;
    }
    #search .search-form-block .search-submit-btn{
    width: 100%;
    padding: 1px 20px;
    color: rgb(255, 255, 255);
    background: rgba(0, 0, 0, .3);
    font-size: 1.7em;
    font-weight: 300;
    text-align: center;
    border: 1px solid;    
    border-color: #999;
    box-shadow: 
        0 0 0px rgba(0,0,0,0.1),
        0px 0px 0px rgba(0,0,0,0.1);
    border-radius: 3px;
    -webkit-transition: color 0.3s ease-out;
    -moz-transition: color 0.3s ease-out;
    -ms-transition: color 0.3s ease-out;
    -o-transition: color 0.3s ease-out;
    transition: color 0.3s ease-out;
    }
    #search .search-form-block .search-submit-btn:hover{
    color: gray;
    }
    #search .close {
    position: fixed;    
    right: 15px;
    color: #fff;
 background-color: #333;
 border-color: #357ebd;
 opacity: 1;
 padding: 10px 17px;
 font-size: 2.5em;
    }

  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <div class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-custom-search" id='search-button'><i class="glyphicon glyphicon-search"></i></a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="https://github.com/" target="_blank">GitHub</a></li>
                        <li>
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>

                            <ul class="dropdown-menu">
                                <li><a href="#">Action [Menu 1.1]</a></li>
                                <li><a href="#">Another action [Menu 1.1]</a></li>
                                <li><a href="#">Something else here [Menu 1.1]</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link [Menu 1.1]</a></li>
                                <li class="divider"></li>
                                <li><a href="#">One more separated link [Menu 1.1]</a></li>
                                <li>
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 1.1] <b class="caret"></b></a>

                                    <ul class="dropdown-menu">
                                        <li><a href="#">Action [Menu 1.2]</a></li>
                                        <li>
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 1.2] <b class="caret"></b></a>

                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 1.3] <b class="caret"></b></a>

                                                    <ul class="dropdown-menu">
                                                        <li><a href="#">Action [Menu 1.4]</a></li>
                                                        <li><a href="#">Another action [Menu 1.4]</a></li>
                                                        <li><a href="#">Something else here [Menu 1.4]</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="#">Separated link [Menu 1.4]</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="#">One more separated link [Menu 1.4]</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </div>
 
    <div id="search">
    <button type="button" class="close">×</button>
    <form>
     <div class="search-form-block">
        <input type="search" value="" placeholder="Search.." />
        <span class="search-submit-btn"><span><i class="glyphicon glyphicon-search"></i></span></span>
     </div>
    </form>
 </div>

Answer 1

我重新安排了 jQuery...现在它可以很好地处理这两个事件

$(document).ready(function() {
$('.navbar a.dropdown-toggle').on('click', function(e) {
    var $el = $(this);
    var $parent = $(this).offsetParent(".dropdown-menu");
    $(this).parent("li").toggleClass('open');

    if(!$parent.parent().hasClass('nav')) {
        $el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4});
    }

    $('.nav li.open').not($(this).parents("li")).removeClass("open");

    return false;
});

 $('#search-button').on('click', function(event) {

    $('#search').addClass('open');
    $('#search input[type="search"]').val("");
    //$('#search input[type="search"]').focus();

 });    
 $('#search, #search button.close').on('click keyup', function(event) {
    if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
        $(this).removeClass('open');
    }
});
});

JQuery 单击导航栏切换按钮后搜索按钮不起作用

JQuery search button not working after clicked navbar-toggle button

jquery

search

twitter-bootstrap-3

fullscreen