角度2下拉引导4避免点击关闭

时间:2017-07-30 23:27:55

标签: angular bootstrap-4 ng-bootstrap

作为标题我需要避免在点击内部时自动关闭下拉列表, 这是代码:

 <li class="nav-item dropdown">
                <div ngbDropdown class="d-inline-block">
                    <a class="nav-link dropdown-toggle" href="#" id="dropdownBasic1" autoClose="nonInput" ngbDropdownToggle ng-click="$event.preventDefault();$event.stopPropagation();return false;"> Signin</a>
                    <div class="dropdown-menu" aria-labelledby="dropdownBasic1">
                        <form>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Password</label>
                                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputFile">File input</label>
                                <input type="file" id="exampleInputFile">
                                <p class="help-block">Example block-level help text here.</p>
                            </div>
                            <div class="checkbox">
                                <label>
                                <input type="checkbox"> Check me out
                                </label>
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div>
                </div>
            </li>

任何想法?提前谢谢

2 个答案:

答案 0 :(得分:4)

对你的ngbDropdown使用autoClose,如下所示:

pagination = soup.find('input', {"type": "submit"})["value"]

答案 1 :(得分:2)

工作NgbCollapse

plunker是此案例的最佳选择

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>

  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
    Toggle
  </a>
    <div class="dropdown-menu p-3" id="collapseExample" [ngbCollapse]="isCollapsed">
      <form>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputFile">File input</label>
          <input type="file" id="exampleInputFile">
          <p class="help-block">Example block-level help text here.</p>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox"> Check me out
          </label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </li>
</ul>