Question

在单击导航链接时以及在页面上的任意位置单击均关闭时，关闭活动的导航标签。

我尝试将removeClass从.tab窗格更改为每个可能的变体，即tabpanel，nav-item，nav-link和只是tab而没有运气。

$(document).on('click', '.nav-link.active', function() {
  var href = $(this).attr('href').substring(1);
  //alert(href);
  $(this).removeClass('active');
  $('.tab-pane[id="' + href + '"]').removeClass('active');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane" id="home" role="tabpanel">A</div>
  <div class="tab-pane" id="profile" role="tabpanel">B</div>
  <div class="tab-pane" id="messages" role="tabpanel">C</div>
  <div class="tab-pane" id="settings" role="tabpanel">D</div>
</div>

在打开的选项卡上单击导航链接时，输出应关闭选项卡。

Answer 1

如您所说。我认为这会对您有所帮助。

$(document).on('click', '.nav-link.active', function() {
  var href = $(this).attr('href').substring(1);
  //alert(href);
  $(this).removeClass('active');
  $('.tab-pane[id="' + href + '"]').removeClass('active');

});
$(document).mouseup(function(e) {
    var container = $("#tablist"); // target ID or class
    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        // get Event here
        $('.active').removeClass('active');
    }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="tablist">
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane" id="home" role="tabpanel">A</div>
  <div class="tab-pane" id="profile" role="tabpanel">B</div>
  <div class="tab-pane" id="messages" role="tabpanel">C</div>
  <div class="tab-pane" id="settings" role="tabpanel">D</div>
</div>

Answer 2

在BS v4中，有一种.tab('show')方法，但是没有什么可以关闭选项卡，因此，您必须手动更新类和属性才能关闭面板。

仅当单击活动导航项触发事件时，才会触发当前事件监听器。这可以帮助关闭当前的导航项，但通常不会做任何事情来响应来自文档的单击。

您将在文档级别需要另一个监听器。然后检查是否单击了导航栏以外的地方，并执行相同的代码以关闭活动选项卡

// listen for clicks to active nav
$(document).on('click', '.nav-link.active', function() {
  hideTab($(this))
});

// listen for clicks everywhere
$(document).on('click', function(e) {
  // if clicked on nav, return
  if ($(e.target).closest(".nav-tabs,.tab-content").length) {return}

  // otherwise, off clicks should close nav
  hideTab($('.nav-link.active'))
});

function hideTab($activeNav) {
  // deselect nav item
  $activeNav.removeClass('active').attr('aria-selected', "false")

  // identify tab pane & deselect
  $($activeNav.attr("href")).removeClass('active');
}

堆栈摘要中的演示

// listen for clicks to active nav
$(document).on('click', '.nav-link.active', function() {
  hideTab($(this))
});

// listen for clicks everywhere
$(document).on('click', function(e) {
  // if clicked on nav, return
  if ($(e.target).closest(".nav-tabs,.tab-content").length) {return}
  
  // otherwise, off clicks should close nav
  hideTab($('.nav-link.active'))
});

function hideTab($activeNav) {
  // deselect nav item
  $activeNav.removeClass('active').attr('aria-selected', "false")

  // identify tab pane & deselect
  $($activeNav.attr("href")).removeClass('active');
}

body {
 background-color: #fff1d7 !important;
 padding: 15px;
 height: 100vh;
}
.tab-content, 
.nav-tabs {
  background: white;
}
.tab-pane {
  padding: 10px;
}
h2 {
  margin-top: 3em !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.js"></script>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane" id="home" role="tabpanel">Home Info</div>
  <div class="tab-pane" id="profile" role="tabpanel">Profile Info</div>
</div>

<h2>Click Anywhere to Close </h2>

Bootstrap 4折叠单击活动选项卡和页面上的导航选项卡

2 个答案:

堆栈摘要中的演示