点击后下拉消失Bootstrap data-toggle ="下拉"问题?

时间:2014-09-08 03:07:40

标签: javascript jquery twitter-bootstrap

这是我正在创建的计时器类型的图像。发布图像需要10个声誉,因此它不会出现。有人请编辑此问题以显示图像。

Screenshot

到目前为止,这是我的代码

<script>
        $(document).ready(function(){
              var timer = null,
        startTime = null,
        progress = $("#progress").shieldProgressBar({
            min: 0,
            max: 1500,
            value: 1500,
            layout: "circular",
            layoutOptions: {
                circular: {
                    width: 10,
                    borderWidth: 0,
                    color: "#f37a5d"
                }
            },
            text: {
                enabled: true,
                template: '<span style="font-size:20px;">{0:n}</span>'
            },
            reversed: true,
        }).swidget();
    $(".icon-clock").shieldButton({
        events: {
            click: function () {
                clearInterval(timer);
                startTime = Date.now();
                timer = setInterval(updateProgress, 100);
            }
        }
    });
    $(".pause_btn").shieldButton({
        events: {
            click: function () {
                clearInterval(timer);
            }
        }
    });
    function updateProgress() {
        var remaining = 1500 - (Date.now() - startTime) / 1000;
        progress.value(remaining);
        if (remaining <= 0) {
            clearInterval(timer);
        }
    }

        stopwatch = $("#progress").shieldProgressBar({
            min: 0,
            max: 3600,
            value: 0,
            layout: "circular",
            layoutOptions: {
                circular: {
                    width: 10,
                    borderWidth: 0,
                    color: "#f37a5d"
                }
            },
            text: {
                enabled: true,
                template: '<span style="font-size:20px;">{0:n}</span>'
            },
        }).swidget();
    $(".icon-stopwatch").shieldButton({
        events: {
            click: function () {
                clearInterval(timer);
                startTime = Date.now();
                timer = setInterval(updatestopwatch, 100);
            }
        }
    });
    $(".pause_btn").shieldButton({
        events: {
            click: function () {
                clearInterval(timer);
            }
        }
    });
    function updatestopwatch() {
        var remaining = (Date.now() - startTime) / 1000;
        stopwatch.value(remaining);
        if (remaining >= 3600) {
            clearInterval(timer);
        }
    }
        });

这是我显示此计时器的代码

<li ><a href="#" class="dropdown-toggle icon-plus" data-toggle="dropdown">
                                        <span data-placement="bottom" title="Show Timer">+ Timer </span></a>

                                        <ul class="dropdown-menu timer-wrapper" style="
padding: 5px;">

                                <div class="btn-group">
                                    <button title="" type="button" class="btn btn-default b_fix icon-stopwatch" onclick="start(0);" data-original-title="Stopwatch"></button>
                                    <button title="" type="button" class="btn btn-default b_fix icon-clock" onclick="start(1);" data-original-title="Timer"></button>
                                </div>


                                      <div class = "time_div form-control">
                                <span id="time" class="form-control">00:00:00</span>
                                <span id="timeelapsed" class="form-control">00:00:00</span>
                                <div class = "progress_div">
                                    <div id = "progress">

                                    </div>
                                </div>
                            </div>

我读到了这个答案 Bootstrap dropdown disappears on input select 和其他一些人但不能弄明白任何帮助都会受到赞赏。

0 个答案:

没有答案