小编dem*_*der的帖子

我需要从左侧滑动打开引导模态.但是,该功能只能在Bootstrap 3上运行,但不能在Bootstrap 4上运行.

Bootstrap 3 ver.:https://codepen.io/bootpen/pen/jbbaRa,Bootstrap 4 ver.:https://codepen.io/rae0724/pen/yKZjax

<div class="modal left fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

.modal.left .modal-dialog {
    position: fixed;
    margin: auto;
    width: 320px;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, …

我想知道如何更改特定模态的模态背景颜色（不是模态的背景颜色）。

如果我使用“ shown.bs.modal”有一些延迟，可以更改颜色。但是我想立即更改背景色。希望有人能帮忙。谢谢。

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (e) {
                $(".modal-backdrop").css('background', '#fb0404');
            })

codepen：https：//codepen.io/rae0724/pen/oqmPmY

有什么方法可以按类别过滤幻灯片吗？我没有这样做。我需要每个幻灯片滑块有多个项目，并按类别过滤。或者有其他推荐使用的jquery插件吗？链接： http: //jsfiddle.net/bre9427s/34/

如果有人能提供帮助，我真的很感激

<div class="slick-buttons">
  <a class="filter-btn view-all active">View All</a>
  <a class="filter-btn view-a">View a</a>
  <a class="filter-btn view-b">View b</a>
  <a class="filter-btn view-c">View c</a>
</div>

<section class="slider">
  <div class="category-a">slide1-a</div>
  <div class="category-b">slide2-b</div>
  <div class="category-c">slide3-c</div>
  <div class="category-a">slide4-a</div>
  <div class="category-c">slide5-c</div>
  <div class="category-b">slide6-b</div>
</section>

$(".slider").slick({
  slidesToShow: 3,
  responsive: [{
    breakpoint: 500,
    settings: {
      dots: false,
      arrows: false,
      infinite: false,
      slidesToShow: 2,
      slidesToScroll: 2
    }
  }]
});

var filtered = false;

$('.viewall').on('click', function() {
  $('.active').removeClass('active');
  $('.viewall').addClass('active');
  $('.slider').slick('slickUnfilter');
  filtered = false;
});
$('.view-a').on('click', function() {
  $('.slider').slick('slickFilter','.category-a');
  $('.active').removeClass('active'); …

元素a里面有一个li.我希望在用户点击时将该current类添加到相关li的a.但是,我不确定如何做到这一点.

$(".nav-link").on('click', function(e) {
  $(this).parent().toggleClass('current');
})

.nav-item.current {
  width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" />
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item current">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" …