ใน "PRODUCTS" ให้คลิกฉันเลื่อน div สีขาวขึ้น (ตามที่เห็นในเอกสารแนบ) เมื่อตอบสนอง (มือถือและแท็บเล็ต) ฉันต้องการปิดแถบนำทางที่ตอบสนองโดยอัตโนมัติและแสดงเฉพาะแถบสีขาวเท่านั้น
ฉันเหนื่อย:
$('.btn-navbar').click();
ยังพยายาม:
$('.nav-collapse').toggle();
และมันได้ผล อย่างไรก็ตามในขนาดเดสก์ท็อปมันถูกเรียกและทำอะไรบางอย่างกับเมนูที่ดูขี้ขลาดซึ่งมันจะหดตัวลงหนึ่งวินาที
ความคิดใด ๆ ?
คำตอบ:
ฉันมีไว้เพื่อใช้กับแอนิเมชั่น!
เมนูใน html:
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
เหตุการณ์การคลิกที่เชื่อมโยงกับองค์ประกอบทั้งหมดในเมนูการนำทางเพื่อยุบ (ปลั๊กอินการยุบ Bootstrap):
$(function(){
var navMain = $("#nav-main");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
});
แก้ไข เพื่อให้ทั่วไปมากขึ้นเราสามารถใช้ข้อมูลโค้ดต่อไปนี้
$(function(){
var navMain = $(".navbar-collapse"); // avoid dependency on #id
// "a:not([data-toggle])" - to avoid issues caused
// when you have dropdown inside navbar
navMain.on("click", "a:not([data-toggle])", null, function () {
navMain.collapse('hide');
});
});
aองค์ประกอบทั้งหมดคุณก็ต้องโทร$("#nav-main").collapse('hide');
คุณไม่จำเป็นต้องเพิ่มจาวาสคริปต์เพิ่มเติมใด ๆ ในสิ่งที่มาพร้อมกับตัวเลือกการยุบ bootstraps เพียงแค่รวม data-toggle และ data-target selectors ไว้ในรายการเมนูของคุณเช่นเดียวกับที่คุณทำกับปุ่ม navbar-toggle ดังนั้นสำหรับรายการเมนูผลิตภัณฑ์ของคุณจะมีลักษณะดังนี้
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
จากนั้นคุณจะต้องทำซ้ำตัวเลือก data-toggle และ data-target สำหรับแต่ละรายการเมนู
แก้ไข !!! ในการแก้ไขปัญหาล้นและการกะพริบในการแก้ไขนี้ฉันกำลังเพิ่มโค้ดเพิ่มเติมเพื่อแก้ไขปัญหานี้และยังไม่มีจาวาสคริปต์เพิ่มเติม นี่คือรหัสใหม่:
<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
นี่คือที่ทำงานhttp://jsfiddle.net/jaketaylor/84mqazgq/
วิธีนี้จะทำให้ตัวเลือกการสลับและกำหนดเป้าหมายของคุณเป็นขนาดหน้าจอโดยเฉพาะและกำจัดข้อบกพร่องในเมนูที่ใหญ่ขึ้น หากใครยังคงมีปัญหาเกี่ยวกับข้อบกพร่องโปรดแจ้งให้เราทราบแล้วเราจะหาทางแก้ไข ขอบคุณ
แก้ไข : ใน bootstrap v4.1.3 ฉันไม่สามารถใช้คลาสที่มองเห็นได้ / ซ่อนอยู่ แทนการhidden-xsใช้d-none d-sm-blockและแทนการvisible-xsใช้d-block d-sm-none.
data-toggleand data-targetให้กับทุกองค์ประกอบ li คุณสามารถเพิ่มลงในพาเรนต์ulหรือdivแท็กได้
พี่ว่าจบวิศวะ ..
$('.navbar-collapse ul li a').click(function(){
$('.navbar-toggle:visible').click();
});
แก้ไข: ในการดูแลเมนูย่อยตรวจสอบให้แน่ใจว่าจุดยึดการสลับมีคลาสแบบเลื่อนลง - สลับอยู่
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () {
$('.navbar-toggle:visible').click();
});
});
แก้ไข 2: เพิ่มการรองรับการสัมผัสโทรศัพท์
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
$('.navbar-toggle:visible').click();
});
});
ฉันชอบความคิดของ Jake Taylor ในการทำโดยไม่ใช้ JavaScript เพิ่มเติมและใช้ประโยชน์จากการสลับการยุบของ Bootstrap ฉันพบว่าคุณสามารถแก้ไขปัญหา "กะพริบ" ได้เมื่อเมนูไม่อยู่ในโหมดยุบโดยปรับdata-targetเปลี่ยนตัวเลือกเล็กน้อยเพื่อรวมinคลาส จึงมีลักษณะดังนี้:
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.in">Products</a></li>
ฉันไม่ได้ทดสอบด้วยรายการแบบเลื่อนลง / เมนูที่ซ้อนกันดังนั้น YMMV
เพื่อให้เสร็จสมบูรณ์ใน Bootstrap 4.0.0-beta โดยใช้. แสดงผลสำหรับฉัน ...
<li>
<a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>
ฉันสมมติว่าคุณมีบรรทัดเช่นนี้กำหนดพื้นที่การนำทางตามตัวอย่าง Bootstrap และทั้งหมด
<div class="nav-collapse collapse" >
เพียงเพิ่มคุณสมบัติดังกล่าวเช่นบนปุ่ม MENU
<div class="nav-collapse collapse" data-toggle="collapse" data-target=".nav-collapse">
ฉันได้เพิ่มไป<body>เช่นกันใช้งานได้ ไม่สามารถพูดได้ว่าฉันทำโปรไฟล์หรืออะไรก็ได้ แต่ดูเหมือนจะเป็นการปฏิบัติสำหรับฉัน ... จนกว่าคุณจะคลิกที่จุดสุ่มของ UI เพื่อเปิดเมนูจึงไม่ค่อยดีนัก
DK
ใช้งานได้ แต่ไม่เคลื่อนไหว
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
ใน HTML ฉันเพิ่มระดับของการนำการเชื่อมโยงไปยังแท็กของการเชื่อมโยงการนำทางในแต่ละ
$('.nav-link').click(
function () {
$('.navbar-collapse').removeClass('in');
}
);
โซลูชันนี้ใช้งานได้ดีทั้งบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่
<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse" data-target=".navbar-collapse collapse">
เพียงแค่สะกดโซลูชันของ user1040259 ให้เพิ่มรหัสนี้ใน $ (document) .ready (function () {});
$('.nav').click( function() {
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
});
ดังที่พวกเขากล่าวถึงสิ่งนี้ไม่ได้ทำให้การเคลื่อนไหวเคลื่อนไหว ... แต่จะปิดแถบนำทางในการเลือกรายการ
สำหรับผู้ที่ใช้ AngularJS และ Angular UI Router กับสิ่งนี้นี่คือวิธีแก้ปัญหาของฉัน (โดยใช้การสลับของ mollwe) โดยที่ ".navbar-main-collision" คือ "data-target" ของฉัน
สร้างคำสั่ง:
module.directive('navbarMainCollapse', ['$rootScope', function ($rootScope) {
return {
restrict: 'C',
link: function (scope, element) {
//watch for state/route change (Angular UI Router specific)
$rootScope.$on('$stateChangeSuccess', function () {
if (!element.hasClass('collapse')) {
element.collapse('hide');
}
});
}
};
}]);
ใช้คำสั่ง:
<div class="collapse navbar-collapse navbar-main-collapse">
<your menu>
นี้ควรทำเคล็ดลับ
ต้องใช้ bootstrap.js
ตัวอย่าง => http://getbootstrap.com/javascript/#collapse
$('.nav li a').click(function() {
$('#nav-main').collapse('hide');
});
สิ่งนี้จะเหมือนกับการเพิ่มแอตทริบิวต์ 'data-toggle = "collision"' และ 'href = "yournavigationID"' ในแท็กเมนูการนำทาง
ฉันใช้ฟังก์ชัน mollwe แม้ว่าฉันจะเพิ่มการปรับปรุง 2 อย่าง:
a) หลีกเลี่ยงการปิดแบบเลื่อนลงหากลิงก์ที่คลิกถูกยุบ (รวมถึงลิงก์อื่น ๆ )
b) ซ่อนเมนูแบบเลื่อนลงด้วยเช่นกันหากคุณกำลังคลิกเนื้อหาเว็บที่มองเห็นได้
jQuery.fn.exists = function() {
return this.length > 0;
}
$(function() {
var navMain = $(".navbar-collapse");
navMain.on("click", "a", null, function() {
if ($(this).attr("href") !== "#") {
navMain.collapse('hide');
}
});
$("#content").bind("click", function() {
if ($(".navbar-collapse.navbar-ex1-collapse.in").exists()) {
navMain.collapse('hide');
}
});
});
ไม่ใช่เธรดใหม่ล่าสุด แต่ฉันค้นหาวิธีแก้ปัญหาเดียวกันและพบอย่างใดอย่างหนึ่ง (ผสมกับปัญหาอื่น ๆ )
ฉันให้ NavButton:
<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...
id / Identifier เช่น:
<button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
ไม่ใช่ "ไอเดีย" ที่ดีที่สุด - แต่: เหมาะสำหรับฉัน! ตอนนี้คุณสามารถตรวจสอบการเปิดเผยปุ่มของคุณ (ด้วย jquery) เช่น:
var target = $('#navcop');
if(target.is(":visible")){
$('#navcop').click();
}
(หมายเหตุ: นี่เป็นเพียงการตัดโค้ดเท่านั้น! ฉันใช้เหตุการณ์ "onclick" บนลิงก์การนำทางของฉัน! (เริ่มต้นการลงทะเบียน AJAX)
ผลลัพธ์ที่ได้คือ: หากปุ่มนั้น "มองเห็นได้" มันได้รับการ "คลิก" ... ดังนั้น: ไม่มีข้อผิดพลาดหากคุณใช้ "มุมมองเต็มหน้าจอ" ของ Bootstrap (ความกว้างมากกว่า 940px)
ทักทาย Ralph
PS: ใช้งานได้ดีกับ IE9, IE10 และ Firefox 25 ไม่ได้ตรวจสอบอื่น ๆ - แต่ฉันไม่เห็นปัญหา :-)
สิ่งนี้ได้ผลสำหรับฉัน ฉันได้ทำเช่นนั้นเมื่อฉันคลิกที่ปุ่มเมนูฉันจะเพิ่มหรือลบคลาส 'in' เพราะการเพิ่มหรือลบคลาสนั้นการสลับจะทำงานตามค่าเริ่มต้น 'e.stopPropagation ()' คือการหยุดภาพเคลื่อนไหวเริ่มต้นโดย bootstrap (ฉันเดา) คุณยังสามารถใช้ 'toggleClass' แทนการเพิ่มหรือลบคลาสได้
$ ('# ChangeToggle') บน ('click', function (e) {
if ($('.navbar-collapse').hasClass('in')) {
$('.navbar-collapse').removeClass('in');
e.stopPropagation();
} else {
$('.navbar-collapse').addClass('in');
$('.navbar-collapse').collapse();
}
});
คุณ cau ใช้
ul.nav {
display: none;
}
โดยค่าเริ่มต้นจะปิด navbar โปรดแจ้งให้เราทราบว่าใครพบว่าสิ่งนี้มีประโยชน์
หากตัวอย่างเช่นไอคอนสลับได้ของคุณปรากฏเฉพาะสำหรับอุปกรณ์ขนาดเล็กพิเศษคุณสามารถทำสิ่งนี้ได้:
$('[data-toggle="offcanvas"]').click(function () {
$('#side-menu').toggleClass('hidden-xs');
});
การคลิก [data-toggle = "offcanvas"] จะเป็นการเพิ่ม. hidden-xs ของ bootstrap ในเมนูด้านข้าง # ของฉันซึ่งจะซ่อนเนื้อหาเมนูด้านข้าง แต่จะปรากฏให้เห็นอีกครั้งหากคุณเพิ่มขนาดหน้าต่าง
ถ้าเมนู html เป็น
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
บน nav toggle 'in' จะถูกเพิ่มและลบออกจากการสลับ ตรวจสอบว่าเมนูตอบสนองเปิดอยู่หรือไม่จากนั้นดำเนินการสลับปิด
$('.nav-collapse .nav a').on('click', function(){
if ( $( '.nav-collapse' ).hasClass('in') ) {
$('.navbar-toggle').click();
}
});
Tuggle Nav Close คำตอบที่เข้ากันได้กับเบราว์เซอร์ IE โดยไม่มีข้อผิดพลาดคอนโซลใด ๆ หากคุณใช้ bootstrap ให้ใช้สิ่งนี้
$('.nav li a').on('click', function () {
if ($("#navbar").hasClass("in")) {
$('.navbar-collapse.in').show();
}
else {
$('.navbar-collapse.in').hide();
}
})
$('.navbar-toggle').trigger('click');
โซลูชัน Bootstrap 4 โดยไม่ต้องใช้ Javascript
เพิ่มแอตทริบิวต์data-toggle="collapse" data-target="#navbarSupportedContent.show" ให้กับ div<div class="collapse navbar-collapse">
ตรวจสอบให้แน่ใจว่าคุณระบุidในdata-target
<div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
.showคือการหลีกเลี่ยงการกะพริบของเมนูในความละเอียดขนาดใหญ่
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>