Question

我正在使用带有锚链接的jasny bootstrap非画布菜单，以便在点击时导航到1月部分。当我点击锚链接时，我添加了一个jquery解决方案来关闭画布外菜单。

JQUERY：关闭Off-Canvas菜单并导航到Anchor Link区号：

$('.navmenu-nav li a').on('click', function(){
   $(".backdrop").hide( 0, function() {});
    $("body").removeClass("bs.offcanvas");});

问题当关闭画布菜单处于活动状态时，上面的代码在992px浏览器宽度下运行良好，但当浏览器宽度超过时 992px关闭画布菜单成为固定的左菜单，但黑色当我点击锚链接时，仍然会出现背景。我试着用 992px之后的 removeAttr 数据目标和数据切换 宽度没有成功。我仍然是JQuery的新手，我似乎无法做到想出这个。

在992px宽度后单击锚点链接时，如何防止背景出现？

奖励：当我选择992px宽度后的锚点链接时，菜单似乎也会跳转，如果关闭画布菜单成为固定的左侧菜单，如何防止它跳转？

Fiddle of issue

先决条件：

Bootstrap.min.css
Bootstrap.min.js
jasny-bootstrap.css
jasny-bootstrap.js

JQuery的：

/Close Modal when navigating to anchor   */
$('.navmenu-nav li a').on('click', function(){
   $(".backdrop").hide( 0, function() {});
    $("body").removeClass("bs.offcanvas");

    });
/Simulate Modal Opening */

$(".nav-link").click(function() { $("#navToggle").click() })

$('.navmenu').on('show.bs.offcanvas', function() {
    $('.backdrop').fadeIn();
});

$('.navmenu').on('hide.bs.offcanvas', function() {
    $('.backdrop').fadeOut();
});


/Close Modal on Resize */
$(window).resize(function() {
  if ($(window).width() > 992) {
    $(".backdrop").hide( 0, function() {});
    $("body").removeClass("bs.offcanvas");

 }
});

HTML

<div class="backdrop"></div>

    <div class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm colornav ">
    <a href="#" class="close" data-toggle="offcanvas" data-target=".navmenu">&times;</a>
     <a id="navToggle" class=""><span></span></a>
      <h4 class="navmenu-brand visible-md visible-lg visible-sm visible-xs" href="#">2017</h4>
      <ul class="nav navmenu-nav">
        <li class="active"><a data-toggle="offcanvas" data-target=".navmenu" class="nav-link" href="#january">Enero</a></li>
        <li><a class="nav-link" href="http://www.jasny.net/bootstrap/examples/navmenu-push/">Msrs</a></li>
        <li><a class="nav-link" href="http://www.jasny.net/bootstrap/examples/navmenu-reveal/">Jupiter</a></li>
        <li><a class="nav-link" href="http://www.jasny.net/bootstrap/examples/navbar-offcanvas/">Off canvas navbar</a></li>
      </ul>

    </div>

    <div class="navbar navbar-default navbar-fixed-top navbar-preheader">
      <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">navbar brand</a>
    </div>

    <div class="container">
      <div class="page-header">
        <h1>Navmenu Template</h1>
      </div>
      <p class="lead">This example shows the navmenu element. If the viewport is <b>less than 992px</b> the menu will be placed the off canvas and will be shown with a slide in effect.</p>
      <p>Also take a look at the examples for a navmenu with <a href="http://www.jasny.net/bootstrap/examples/navmenu-push">push effect</a> and <a href="http://www.jasny.net/bootstrap/examples/navmenu-reveal">reveal effect</a>.</p>
<p class="space"></p>
      <p id="january">sssssssssssssssssssssssssssssssssssssssssssss</p>
    </div><!-- /.container -->

CSS：

html, body {
  height: 100%;
}
body {
  padding: 50px 0 0 0;
}

.space {padding-bottom:900px;}

.backdrop {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1040;
  display: none;
}

.navbar-fixed-top {

  background:#fff!important;
}


.navbar {
  display: block;
  text-align: center;
}
.navbar-brand {
  display: inline-block;
  float: none; 
}
.navbar-toggle {
  position: absolute;
  float: left; 
  margin-left: 15px;
}

.container {
  max-width: 100%;
}

@media (min-width: 1px) {
  .navbar-toggle {
    display: block !important; background:none!important;  border:none !important; color:#f90 !important;
  }
}

@media (min-width: 992px) {
  body {
    padding: 30px 0 0 300px;
  }
  .navmenu {
    padding-top: 0; 
  }

.navbar-toggle {display:none!important;}
.close {display:none}


.navmenu-fixed-left {
  z-index:0;
  top: 48px;
  bottom: 0; background:#fff!important;
}

}

    .navbar-default .navbar-toggle .icon-bar{
       background-color:#333;
    }


.close {margin-right:10px; margin-top:10px;}

@media (max-width:991px) {



.navmenu-fixed-left {
  z-index:1050;
  top: 0;
  bottom: 0; background:#fff!important;
}


}

    .backdrop {display:none}

Answer 1

我已经对你的小提琴进行了一些修改，现在你可以检查它here。我想我已经解决了，现在它正在做你想做的事。

如果窗口宽度超过992，则导航点击叠加层将不会显示
如果窗口宽度小于或等于992，它将按原样工作

请在此处查看jQuery代码：

＆＃13;

let Vehicle = {
    debug() {
        return 'Vehicle';
    }
};

let Car = {
    debug() {
        return super.debug() + ' is a Car';
    }
};

＆＃13;

Answer 2

您可以使用媒体查询单独使用CSS解决此问题，并使用!important强制优先于jquery插件的内联样式

@media (min-width: 992px) {
  .backdrop {
    display: none!important;
  }
}

某些浏览器大小后删除模态背景（jasny bootstrap）

2 个答案: