Bootstrap导航链接不起作用

时间:2018-04-14 16:14:42

标签: javascript jquery twitter-bootstrap-3

我正在使用bootstrap 3.3.7并使用bootstrap的导航栏。我希望菜单在使用Tab键时切换。下面的代码工作正常,但由于这个,打开后菜单链接定义内部不起作用。

注意: - 使用选项卡,然后单击链接不起作用。使用鼠标并单击链接工作。

Error(3,9): PL/SQL: Statement ignored
Error(3,14): PLS-00363: expression 'SELF.NUMB' cannot be used as an assignment target

以下代码

$(".main-nav a").on("keydown", function () {  
        $(this).next().dropdown("toggle");
});

以上是完整的代码,使用选项卡导航在keydown上打开,这是我的要求。但是由于这个链接不起作用。

1 个答案:

答案 0 :(得分:0)

试试这个

<style>
.marginBottom-0 {margin-bottom:0;}

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#555;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

</style>
    <nav class="navbar navbar-default navbar-static-top marginBottom-0" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav">

                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Dropdown Link 1</a></li>
                        <li><a href="#">Dropdown Link 2</a></li>
                        <li><a href="#">Dropdown Link 3</a></li>
                        <li class="divider"></li>
                        <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 4</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Dropdown Submenu Link 4.1</a></li>
                                <li><a href="#">Dropdown Submenu Link 4.2</a></li>
                                <li><a href="#">Dropdown Submenu Link 4.3</a></li>
                                <li><a href="#">Dropdown Submenu Link 4.4</a></li>
                            </ul>
                        </li>

                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </nav>

<script>
(function($){
    $(document).ready(function(){
        $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
            event.preventDefault(); 
            event.stopPropagation(); 
            $(this).parent().siblings().removeClass('open');
            $(this).parent().toggleClass('open');
        });
    });
})(jQuery);
</script>