时间戳

首页 > 解决方案 > 无需通过 JS 功能点击即可打开和关闭 Bootstrap 下拉菜单

javascript - 无需通过 JS 功能点击即可打开和关闭 Bootstrap 下拉菜单

问题描述

我的网站迷你购物车有一个 Bootstrap 下拉菜单，如下所示。我对其进行了设置，以便当它下降时，它后面会有一个灯箱效果，使其余内容变灰。

$(".dropdown").on('show.bs.dropdown hide.bs.dropdown', function(e) {
  var lightbox = document.getElementById("lightbox_container");
  if(e.type == 'hide'){
    lightbox.style.display = "none";
  }else if(e.type == 'show'){
    lightbox.style.display = "block";
  }
});
#lightbox_container{
  position:fixed;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.5);
  z-index:40;
  display:none;
  top:0px;
  left:0px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="dropdown d-inline minicart">
  <span class="dropdown-toggle" data-toggle="dropdown">
    <img src="media/icons/cart.png" alt="cart icon" class="icon">
  </span>
  <ul class="dropdown-menu" id="minicart">
    <li class="dropdown-submenu">
    // stuff goes here
    </li>
  </ul>
</div>

<div id="lightbox_container"></div>

这可以按预期工作并且工作正常，但是我想在添加某些内容时弹出迷你车。

我是 Bootstrap 的新手，所以不太确定如何实现这一目标。我这样做了：

function show_cart(){
    $(".minicart").addClass("show");
    $(".minicart .dropdown-toggle").attr("aria-expanded", "true");
    $(".minicart .dropdown-menu").addClass("show");
    $(".minicart .dropdown-menu").css("position", "absolute");
    $(".minicart .dropdown-menu").css("transform", "translate3d(-171px, 21px, 0px)");
    $(".minicart .dropdown-menu").css("top", "0px");
    $(".minicart .dropdown-menu").css("left", "0px");
    $(".minicart .dropdown-menu").css("will-change", "transform");
    $("#lightbox_container").css("display", "block");
}

但显然这不是很好，即使它有点工作，但是当它打开时，我无法在下拉列表之外单击以关闭它，我实际上必须向上并单击图标。

编辑

我将其更改为：

function show_cart(){
    $(".minicart").addClass("show");
    $(".minicart .dropdown-toggle").attr("aria-expanded", "true");
    $(".minicart .dropdown-menu").addClass("show");;
    var doc_width = $(document).outerWidth(true);
    if (doc_width <= 768){
        $(".minicart .dropdown-menu").css("left", "-250px");
    }else{
        $(".minicart .dropdown-menu").css("left", "-350px");
    }
    $("#lightbox_container").css("display", "block");
}

然后再次隐藏它，我在实际的灯箱中添加了一个点击事件：

$("#lightbox_container").on("click", function(){
    if($("#navbarSupportedContent").hasClass("show")){
        $("#navbarSupportedContent").hide();
    }
    if($(".dropdown.locale").hasClass("show")){
        $(".dropdown.locale").hide();
    }
    if($(".dropdown.minicart").hasClass("show")){
        $(".dropdown.minicart").hide();
    }
    var lightbox = document.getElementById("lightbox_container");
    lightbox.style.display = "none";
    $(".minicart .dropdown-toggle").attr("aria-expanded", "flase");
    $(".minicart .dropdown-menu").removeClass("show");
});

标签： javascriptjqueryhtmlcssbootstrap-4

解决方案

您可以直接在菜单上切换可见性，如下所示：

$('.dropdown .dropdown-menu').toggle();

或者像这样：

$('.dropdown .dropdown-menu').show();

如果你愿意，你也可以模拟点击切换按钮：

$('.dropdown-toggle').click();

推荐阅读