Question

我正在使用jquery进行Dropdown但是有一些错误，并且因为它无法正常工作。我的HTML是

<div id="maintain_execute_suite" style="margin-left: 169px; margin-top: 102px;">
        <div class="row">

            <div class="col-sm-3">

                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span data-bind="label">Select One Suite</span>&nbsp;<span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Item 1</a></li>
                                <li><a href="#">Another item</a></li>
                                <li><a href="#">This is a longer item that will not fit properly</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>

和jquery是

$( document.body ).on( 'click', '.dropdown-menu li', function( event ) {

        var $target = $( event.currentTarget );

        $target.closest( '.btn-group' )
           .find( '[data-bind="label"]' ).text( $target.text() )
           .end()
           .children( '.dropdown-toggle' ).dropdown( 'toggle' );

        return false;

     });

当我点击菜单然后它正在打开但是从列表中选择选项后它没有显示该值。我把它发布到小提琴http://jsfiddle.net/cvhpac4m/5/ 我无法插入引导程序的js和css enter image description here

Answer 1

您是否在HTML中包含了jQuery？

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

同时检查是否有任何与jQuery的相关链接（例如，没有http：src="//code...的链接）在本地计算机上没有中断。

这是我的确切代码，不是我在本地机器上打开而没有错误的小提琴。：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Generic</title>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div id="maintain_execute_suite" style="margin-left: 169px; margin-top: 102px;">
        <div class="row">

            <div class="col-sm-3">

                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span data-bind="label">Select One Suite</span>&nbsp;<span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Item 1</a></li>
                                <li><a href="#">Another item</a></li>
                                <li><a href="#">This is a longer item that will not fit properly</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script>
        $( document.body ).on( 'click', '.dropdown-menu li', function( event ) {

            var $target = $( event.currentTarget );

            $target.closest( '.btn-group' )
            .find( '[data-bind="label"]' ).text( $target.text() )
            .end()
            .children( '.dropdown-toggle' ).dropdown( 'toggle' );

            return false;

        });
    </script>
</body>
</html>

我的Dropdown无法正常工作

1 个答案: