Chertib qo'yish mumkin bo'lgan Bootstrap 4 navbarni qanday yashirish kerak

Bootstrap 4 yordamida ishlaydigan bu qulflangan navbarni chiroyli tarzda yaratdim, lekin foydalanuvchining havolani urganida uni o'chirishni xohlayman. Buni qilishning har qanday usuli? Rahmat

html navbar:

 

Cs uchun .con-bar, chunki Bootstrap 4 ikon-bar sinfidan foydalanmaydi.

.navbar-toggler .icon-bar {
  margin: 7px;
  display: block;
  width: 22px;
  height: 1px;
  background-color: #cccccc;
  border-radius: 1px;
}
30

6 javoblar

Bu kabi havolalarga collapse komponentini qo'shishingiz mumkin.


"ma'lumot almashinuvi" usuli yordamida demo

Or, (perhaps a better way) use jQuery like this..

$('.navbar-nav>li>a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});

jQuery usulidan foydalanib, demo

2018 yangilash versiyasi 4.0.0 ni yangilash

Navbar o'zgartirildi, lekin so'ng yopiq usuli yana bir xil:

https://www.codeply.com/go/nFDHoEqqJQ

46
qo'shib qo'ydi
BS 4 da belgilar majmuasi uchun dan foydalanishingiz mumkin.
qo'shib qo'ydi muallif ZimSystem, manba
Matn ranglarini oq (yoki shaffof oq) sifatida o'zgartirish uchun Navbardagi navbar-inverse dan foydalanishingiz mumkin
qo'shib qo'ydi muallif ZimSystem, manba
Salom, javobingiz uchun rahmat, lekin buni qilsam, navbarni yiqitmaydi, balki uni scrollspy bilan bog'langan div elementi. Har qanday taklif bormi? Rahmat
qo'shib qo'ydi muallif RT5754, manba
Men buni ishlatardim, lekin keyinchalik barlarning rangini o'zgartira olmadim. (Oq rang istaganlar). Yuqoridagi narsani muqobil deb topdim, ammo qanday qilib ikon rangini o'zgartiraman? Yana bir bor rahmat
qo'shib qo'ydi muallif RT5754, manba
Buning uchun rahmat. Men navbarni teskari o'girlashni orqa rejalashtirgan deb o'yladim, lekin men noto'g'ri bo'ldim.
qo'shib qo'ydi muallif RT5754, manba
Bizning shablonlarimiz va Asp.NET Core-dan foydalanayotganlar uchun stackoverflow.com/questions/42401606/… navbar-collapse.show " ni li tagiga kiriting.
qo'shib qo'ydi muallif Pier, manba
Rahmat, jQuery usuli men uchun juda yaxshi ishladi
qo'shib qo'ydi muallif Kraulain, manba
Salom, qo'llab-quvvatlaganingiz uchun tashakkur, u men uchun ishladi
qo'shib qo'ydi muallif Jomal Johny, manba

$. Collapse ("yashirish"); - bu havolalardagi voqea ishlov beruvchisi bilan qo'ng'iroq qilishingiz mumkin.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('.nav-link').on('click',function() {
  $('.navbar-collapse').collapse('hide');
});
.navbar-toggler .icon-bar {
  margin: 7px;
  display: block;
  width: 22px;
  height: 1px;
  background-color: #cccccc;
  border-radius: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
 
</div> </div>

8
qo'shib qo'ydi

ANGULAR dan foydalanayapman, chunki u menga muammolarni keltirdi, chunki routerLink ligi yorlig'ida ma'lumotlar almashtirishni va maqsadni kiritish uchun .... yoki "ZimSystem" kabi jquery-

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<div class="collapse navbar-collapse" id="navbarSupportedContent">
      
</div>
</div> </div>

7
qo'shib qo'ydi
Rahmat, siz meni kunni qutqardingiz! 4.1.3 ochilish chizig'i bilan angular 6 dan foydalanayapman. data-toggle = "collapse" data-target = "navbar-collapse.show" ni ochish uchun li ga qo'shing.
qo'shib qo'ydi muallif learning..., manba
Bu burchakka erishishning eng yaxshi yo'li. rahmat
qo'shib qo'ydi muallif Pier, manba

Yuqoridagi echimlarni sinab ko'rish bilan, men Dropdown toggles uchun echim topilmadi, shuning uchun siz bu erga borasiz! Bundan tashqari, sub menyularidagi narsalar ochiladi.

O'zgartirish sinfingiz boshqacha bo'lsa, unda siz uni biroz chimirishingiz kerak.

$('.navbar-nav li a').on('click', function(){
    if(!$( this ).hasClass('dropdown-toggle')){
        $('.navbar-collapse').collapse('hide');
    }
});
4
qo'shib qo'ydi

Hech qanday kodlash bilan faqat burchakli 2/4 shablonni ishlatishning eng oson yo'li:

 
1
qo'shib qo'ydi

Boostrap 4 bilan angular 5 dan foydalanayapman. Bu men uchun shu tarzda ishlaydi.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

 $(document).on('click', '.navbar-nav>li>a, .navbar-brand, .dropdown-menu>a', function (e) {
      if ( $(e.target).is('a') && $(e.target).attr('class') != 'nav-link dropdown-toggle' ) {
        $('.navbar-collapse').collapse('hide');
      }
    });
   }


 
</div> </div>

1
qo'shib qo'ydi