Question

我试图为游戏制作一张船舶信息卡片，但是每艘船都有多次验证。例如＆＃34;大型快船＆＃34;和＃34;节日大型快船＆＃34; 但是在下拉菜单中，我的列表项只能工作一次，然后不会返回非活动状态。 JSFiddle

<div class="p-0">
  <div class="container">
    <div class="row">
      <div class="col-md-12" style="">
        <div class="tab-content">
          <div class="tab-pane fade show active" id="adventure" role="tabpanel">
            <div class="card" style="">
              <div class="card-header"><img src="http://eversong.ivyro.net/SHIP/00000024.png" height="50" width="50">
                <h4 style="display:inline-block">Large Clipper</h4>
                <div class="btn-group float-right">
                  <button class="btn btn-primary dropdown-toggle" id="variationsDropdown" type="button" aria-haspopup="true" aria-expanded="true" data-toggle="dropdown"> Variations </button>
                  <div class="dropdown-menu" aria-labelledby="variationsDropdown">
                    <a class="dropdown-item" href="#large-clipper" data-toggle="tab">Large Clipper</a>
                    <a class="dropdown-item" href="#festive-large-clipper" data-toggle="tab">Festive Large Clipper</a>
                  </div>
                </div>
              </div>
              <div class="tab-content">
                <div class="tab-pane fade show active" id="large-clipper">
                  <div class="card-body">
                    <h6 class="text-muted">
                      Just a big and fast clipper.
                      </h6>
                    <p class=" p-y-1">
                      <span style="font-style:italic">Level requirements: </span>
                      <span>Adventure: 30 </span>
                      <span>Trade: 56 </span>
                      <span>Maritime: 75</span>
                    </p>
                    <div class="row">
                      <div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Selling: <span>5</span> </a></div>
                      <div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Buying: <span>10</span> </a></div>
                    </div>
                  </div>
                </div>
                <div class="tab-pane fade" id="festive-large-clipper">
                  <div class="card-body">
                    <h6 class="text-muted">
                      A large clipper but with fancy plating.
                      </h6>
                    <p class=" p-y-1">
                      <span style="font-style:italic">Level requirements: </span>
                      <span>Adventure: 30 </span>
                      <span>Trade: 56 </span>
                      <span>Maritime: 75</span>
                    </p>
                    <div class="row">
                      <div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Selling: <span>5</span> </a></div>
                      <div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Buying: <span>10</span> </a></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

当您按下＆＃34; Variations＆＃34;中的项目时，您可以看到我的意思。下拉列表。

Answer 1

显然它是一个错误，找到了我的解决方案here (github)。

必须添加

$(".nav-pills .nav-item .nav-link:not(.nav-pills .nav-item.dropdown .nav-link), .dropdown-item").click(function()
{
    $(".dropdown-item.active").removeClass('active');
});

Bootstrap下拉按钮不会失去活动状态

1 个答案: