小编Tom*_*dge的帖子

Twitter Bootstrap(3.0.0)Dropdown&PrototypeJS

我有一个应用程序,我正在慢慢转换为jQuery并且也将使用Bootstrap.

但是,使用Bootstrap 3时,单击下拉菜单后,菜单会正确显示.然而,在单击菜单或"关闭"菜单后.按钮/链接完全消失,直到页面刷新后才会重新出现.

与此相同:https://github.com/twbs/bootstrap/issues/8379

上面的链接说要联系谷歌组,但我没有在组中看到任何关于此的请求.

任何帮助将不胜感激!

谢谢, - 大卫

所以使用@ GeekNum88的指导,如果你注释掉这些行,下拉列表就可以了,不确定它的总效果:

  function clearMenus() {
    $(backdrop).remove()
    $(toggle).each(function (e) {
    var $parent = getParent($(this))
    if (!$parent.hasClass('open')) return
//      $parent.trigger(e = $.Event('hide.bs.dropdown'))
//      if (e.isDefaultPrevented()) return
    $parent.removeClass('open').trigger('hidden.bs.dropdown')
  })
 }
Run Code Online (Sandbox Code Playgroud)

jquery prototypejs twitter-bootstrap twitter-bootstrap-3

11
推荐指数
1
解决办法
1986
查看次数

在Bootstrap按钮下拉列表标题/占位符文本中显示所选项目

这个问题已经在Stackoverflow上被问了几次 - 但是我仍然无法触及它的底部...而且我的查询是投入更多的下拉菜单.所以我有两个下拉菜单和一个搜索.我想从下拉列表和"已选择"中选择以替换下拉占位符文本.但我还需要记住,在点击搜索后,它将查询数据库中的这些选定字段.

            <!-- Search box Start -->
                    <form>
                        <div class="well carousel-search hidden-phone">
                            <div class="btn-group">
                                <a class="btn dropdown-toggle btn-select" data-toggle="dropdown" href="#">Select a Country<span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                    <li><a href="#">Item I</a></li>
                                    <li><a href="#">Item II</a></li>
                                    <li><a href="#">Item III</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Other</a></li>
                                    </ul>
                        </div>

                            <div class="btn-group">
                                <a class="btn dropdown-toggle btn-select2" data-toggle="dropdown" href="#">Select a Region/City<span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Item I</a></li>
                                    <li><a href="#">Item II</a></li>
                                    <li><a href="#">Item III</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Other</a></li>
                                    </ul>
                            </div>
                            <div class="btn-group">
                                <button type="submit" class="btn btn-primary">Search</button>
                            </div>

                        </div>
                    </form>
            <!-- Search …
Run Code Online (Sandbox Code Playgroud)

html jquery twitter-bootstrap

9
推荐指数
1
解决办法
4万
查看次数

单击Child元素时忽略Parent onClick事件

请参阅 - http://www.bootply.com/dR7fxjP1bk

通过单击任何div.rows(让我们调用此父项),将激活onClick事件,出于演示目的,将弹出警报.

在行中,当点击"信息"(橙色按钮)时,手风琴会折叠(让我们调用这个孩子),但问题是父母警告触发器.

我需要信息按钮才能触发警报,只有在点击其他任何地方时才会显示警报.

我尝试了各种各样的方法,例如使用(e)stopPropagation .on .off调用等...我不是最好的jquery家伙,所以需要一些帮助才能让这个工作 - 并且还帮助我学习一些东西!

<div class="row ticket-selector" onclick="alert('Hello World!');">
    <a data-toggle="collapse" data-parent="#ticket-panel" href="#collapseOne" class="tickets-more"><span class="halflings info-sign orange"></span></a>
</div>
Run Code Online (Sandbox Code Playgroud)

以上是jist - 但是为了更好地理解 - http://www.bootply.com/dR7fxjP1bk

html javascript jquery twitter-bootstrap

8
推荐指数
2
解决办法
9489
查看次数

为什么Bootstrap 3导航栏下拉列表在IE8中不起作用?

引导程序3下拉列表在IE8中不起作用,我不知道为什么,对此有任何帮助.有人说因为BS添加了CSS过滤属性

css internet-explorer navbar twitter-bootstrap

7
推荐指数
1
解决办法
1万
查看次数

计算console.log对象

下面的代码将控制台日志打印到页面上.它记录来自服务器的获取和响应,如:

14:15:17 GMT+0000 (GMT Standard Time) Submitting HTTP GET request to http...
14:15:22 GMT+0000 (GMT Standard Time) Received HTTP response: {..
14:15:17 GMT+0000 (GMT Standard Time) Submitting HTTP GET request to http...
14:15:22 GMT+0000 (GMT Standard Time) Received HTTP response: {..
Run Code Online (Sandbox Code Playgroud)

我不想在页面上显示这些内容,而是计算每个响应和请求,以便您看到从1开始到结束时的数字,可以是任何数字.这是为了向用户显示正在发生的事情而不向他们显示所有响应并获取数据.

        function logHttpResponse(response) {
        var now = new Date();
        var logger = document.getElementById('log');
        var logMessage = now.toTimeString() + " Received HTTP response: " + JSON.stringify(response);
        console.log = function (logMessage) {
            if (typeof logMessage == 'object') {
                logger.innerHTML += (JSON …
Run Code Online (Sandbox Code Playgroud)

javascript json

7
推荐指数
1
解决办法
1734
查看次数

在bootstrap下拉列表上添加延迟

我试图找到在这个引导程序下拉列表中添加延迟的最简单方法... http://www.bootply.com/64074我尝试了各种方法和脚本,但我似乎无法做到这一点.我添加了一条css行,允许鼠标悬停时自动下拉.

            <!-- Top Nav -->
                    <div class="navbar hidden-phone well well-small">
                        <div class="navbar-inner header-drop-nav">

                    <!-- 1st dropdown -->
                    <ul class="nav nav-tabs">
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Browse by Destination <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                  <!--  1st Top Nav links -->
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li class="nav-header">Nav header</li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                        </li>
                    </ul>

                    <!-- 2nd dropdown -->
                    <ul class="nav nav-tabs pull-middle">
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Browse by …
Run Code Online (Sandbox Code Playgroud)

css jquery twitter-bootstrap

6
推荐指数
1
解决办法
1万
查看次数

按药丸/按钮过滤,而不使用选择-角度

我正在使用Angular进行构建,并使用了一个过滤器管道来过滤*ngFor循环中下拉菜单中的所选选项。然后,内容将进行相应过滤。我想将选择选项交换为按钮或药丸。因此,当单击按钮时,将进行过滤-该按钮将充当开/关开关,因此您可以过滤多个选项。

这是我的stackblitz例子- https://stackblitz.com/edit/timeline-angular-7-tyle1f

    <div class="form-group row">
      <div class="col-sm">
        <select class="form-control" name="locationFilter" id="locationFilter" [(ngModel)]="filteredLocation">
          <option value="All">All</option>
          <option *ngFor="let entry of timeLine | filterUnique" value="{{entry.location}}">{{entry.location}}
          </option>
        </select>
      </div>
//Button filters below
       <div ngDefaultControl [(ngModel)]="filteredLocation" name="locationFilter" id="locationFilter">
            <button class="btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique">{{entry.location}}</button>
       </div>
    </div>
Run Code Online (Sandbox Code Playgroud)

我不确定如何使按钮以与未进行过滤相同的方式工作。

javascript pipe filter typescript angular

6
推荐指数
1
解决办法
96
查看次数

Material-ui 表格行 onClick 绕过复选框选择

我正在使用 material-ui 数据表进行排序。这在每行上包含一个复选框。我已经做到了每一行都会返回一个点击链接。

但是,我不希望该复选框充当单击,并希望它充当复选框并将该行添加到选定的行。但是当单击复选框时,将返回行链接。

我需要从行链接中排除该单元格或以某种方式排除复选框。

https://codesandbox.io/s/rlkv87vor4

这是我为逻辑所尝试的:

单击处理程序

if (event.target.classList.contains('selectCheckbox')) {
  return console.log('checkbox select');
  } else {
  return console.log('row link');
}
Run Code Online (Sandbox Code Playgroud)

在我的演示 row link中,单击复选框时总是返回。

<TableCell padding="checkbox">
  <Checkbox className="selectCheckbox" checked={isSelected} />
</TableCell>
Run Code Online (Sandbox Code Playgroud)

javascript reactjs material-ui

5
推荐指数
1
解决办法
9838
查看次数

ngIf 角反应形式分量值

我有一组单选按钮。如果用户选择值“是”,我想在表单上显示一个附加框。

https://stackblitz.com/edit/angular-4bgahw?file=src/app/personal/personal.component.ts

HTML.component

<div formGroupName="radioButtonsGroup" class="form-group col-6 pl-0 pt-3">

    <div class="form-check-inline" *ngFor="let item of personal.radioButtonsdata">
        <label for="{{item.section}}" class="col-12 customradio"
            ><span>{{item.section}}</span>
            <input [value]="item" id="{{item.section}}" type="radio" formControlName="selectedButton"/>
            <span class="checkmark"></span>
        </label>
    </div>

    <!-- <div class="col-md-8" *ngIf="selectedButton.control.item === 'yes'"> --> //my attempt to target above input value
  <div class="col-md-8" >
        <input type="text" formControlName="title" class="form-control" placeholder="Title">
</div>
    </div>
Run Code Online (Sandbox Code Playgroud)

任何人都可以让它工作并告诉我我在这里做错了什么吗?

javascript typescript angular angular-reactive-forms

5
推荐指数
2
解决办法
4893
查看次数

Umbraco的Bootstrap 3

如何在Umbraco中实现新的Bootstrap 3?刚刚创建了一个新的Umbraco站点,我希望它基于新的Bootstrap 3.任何人都可以帮助我吗?

umbraco twitter-bootstrap twitter-bootstrap-3

3
推荐指数
1
解决办法
6566
查看次数