刪除特定瀏覽器大小後的模態背景（jasny bootstrap）

Question

我正在使用jasny bootstrap off-canvas菜單與錨鏈接來導航到點擊1月部分。當我點擊錨鏈接時，我添加了一個jquery解決方案來關閉非帆布菜單。

JQUERY：關閉關帆布菜單和導航到錨鏈接區號：

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

問題上面的代碼下992px瀏覽器寬度的偉大工程時，關閉帆布菜單處於激活狀態，但是當瀏覽器寬度超過 992px時，畫布外菜單變爲固定的左菜單，但當點擊錨鏈接時仍會出現黑色的 背景。我試圖用 的removeAttr數據目標和數據切換後992px 寬度沒有成功。我在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代碼在這裏：

// simulate modal opening 
 
$('.nav-link').click(function(e) { 
 
    if ($(window).width() > 992) { 
 
    $('.backdrop').hide(0, false); 
 
    } 
 
    
 
\t $('#navToggle').click(); 
 
}); 
 

 
$('.navmenu').on('show.bs.offcanvas', function() { 
 
    if ($(window).width() <= 992) { 
 
    $('.backdrop').fadeIn(); 
 
    } 
 
}); 
 

 
$('.navmenu').on('hide.bs.offcanvas', function() { 
 
    if ($(window).width() <= 992) { 
 
    $('.backdrop').fadeOut(); 
 
    } 
 
}); 
 

 

 
// close modal on resize 
 
$(window).resize(function() { 
 
    if ($(window).width() > 992) { 
 
    $('.backdrop').hide(0, false); 
 
    $('body').removeClass('bs.offcanvas'); 
 
    } 
 
}); 
 

 
// switch active navigation link onclick 
 
$('.nav a').on('click', function() { 
 
    $('.nav').find('.active').removeClass('active'); 
 
    $(this).parent().addClass('active'); 
 
}); 
 

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

Answer 2

你可以用CSS單獨使用媒體查詢和!important迫使特異性在jQuery插件的內嵌樣式

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