Trên "SẢN PHẨM", nhấp vào Tôi trượt lên một div màu trắng (như được thấy trong phần đính kèm). Khi ở chế độ đáp ứng (thiết bị di động và máy tính bảng), tôi muốn tự động đóng thanh điều hướng đáp ứng và chỉ hiển thị thanh màu trắng.
Tôi đã thử:
$('.btn-navbar').click();
cũng đã thử:
$('.nav-collapse').toggle();
Và nó hoạt động. Tuy nhiên ở kích thước máy tính để bàn, nó cũng được gọi và thực hiện một cái gì đó thú vị với menu nơi nó thu nhỏ trong một giây.
Có ý kiến gì không?
Câu trả lời:
Tôi có nó để làm việc với hoạt ảnh!
Menu trong html:
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
Sự kiện nhấp chuột ràng buộc trên tất cả các phần tử trong menu điều hướng đến thu gọn (plugin thu gọn Bootstrap):
$(function(){
var navMain = $("#nav-main");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
});
CHỈNH SỬA Để làm cho nó chung chung hơn, chúng ta có thể sử dụng đoạn mã sau
$(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');
});
});
acác yếu tố: bạn chỉ cần là để gọi$("#nav-main").collapse('hide');
Bạn không phải thêm bất kỳ javascript bổ sung nào vào những gì đã có trong tùy chọn thu gọn bootstraps. Thay vào đó, chỉ cần bao gồm các bộ chọn chuyển đổi dữ liệu và nhắm mục tiêu dữ liệu vào các mục trong danh sách menu của bạn giống như bạn làm với nút chuyển đổi thanh điều hướng. Vì vậy, đối với mục menu Sản phẩm của bạn, nó sẽ giống như thế này
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
Sau đó, bạn sẽ cần lặp lại các bộ chọn chuyển đổi dữ liệu và mục tiêu dữ liệu cho từng mục menu
BIÊN TẬP!!! Để khắc phục sự cố tràn và chập chờn trên bản sửa lỗi này, tôi đang thêm một số mã khác sẽ khắc phục sự cố này và vẫn không có thêm javascript nào. Đây là mã mới:
<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>
Đây là nơi làm việc http://jsfiddle.net/jaketaylor/84mqazgq/
Điều này sẽ làm cho các bộ chọn chuyển đổi và nhắm mục tiêu của bạn cụ thể với kích thước màn hình và loại bỏ các lỗi trên menu lớn hơn. Nếu ai đó vẫn gặp vấn đề với trục trặc, vui lòng cho tôi biết và tôi sẽ tìm cách khắc phục. Cảm ơn
CHỈNH SỬA : Trong bootstrap v4.1.3, tôi không thể sử dụng các lớp hiển thị / ẩn. Thay vì hidden-xssử dụng d-none d-sm-blockvà thay vì visible-xssử dụng d-block d-sm-none.
data-togglevà data-targetvào mọi phần tử li, bạn có thể thêm nó vào phần tử cha ulhoặc divcác thẻ.
Tôi nghĩ rằng bạn là tất cả về kỹ thuật ..
$('.navbar-collapse ul li a').click(function(){
$('.navbar-toggle:visible').click();
});
CHỈNH SỬA: Để chăm sóc các menu phụ, hãy đảm bảo neo chuyển đổi của chúng có lớp chuyển đổi thả xuống trên đó.
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () {
$('.navbar-toggle:visible').click();
});
});
CHỈNH SỬA 2: Thêm hỗ trợ cho cảm ứng điện thoại.
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
$('.navbar-toggle:visible').click();
});
});
Tôi thực sự thích ý tưởng của Jake Taylor về việc thực hiện nó mà không cần thêm JavaScript và tận dụng khả năng chuyển đổi thu gọn của Bootstrap. Tôi thấy rằng bạn có thể khắc phục sự cố "nhấp nháy" hiện tại khi menu không ở chế độ thu gọn bằng cách sửa đổi data-targetmột chút bộ chọn để bao gồm inlớp. Vì vậy, nó trông như thế này:
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.in">Products</a></li>
Tôi đã không kiểm tra nó với menu / menu thả xuống lồng nhau, vì vậy YMMV.
chỉ để hoàn thiện, trong Bootstrap 4.0.0-beta sử dụng .show đã làm việc cho tôi ...
<li>
<a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>
Tôi giả sử bạn có một dòng như thế này xác định vùng điều hướng, dựa trên các ví dụ Bootstrap và tất cả
<div class="nav-collapse collapse" >
Chỉ cần thêm các thuộc tính như vậy, chẳng hạn như trên nút MENU
<div class="nav-collapse collapse" data-toggle="collapse" data-target=".nav-collapse">
Tôi cũng đã thêm vào <body>, đã hoạt động. Không thể nói rằng tôi đã mô tả nó hoặc bất cứ điều gì, nhưng có vẻ như một điều trị cho tôi ... cho đến khi bạn nhấp vào một vị trí ngẫu nhiên của giao diện người dùng để mở menu, vì vậy không tốt như vậy.
DK
Điều này hoạt động, nhưng không hoạt hình.
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
Trong HTML tôi đã thêm một lớp của nav-link đến một thẻ của mỗi liên kết điều hướng.
$('.nav-link').click(
function () {
$('.navbar-collapse').removeClass('in');
}
);
giải pháp này hoạt động tốt, trên máy tính để bàn và thiết bị di động.
<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse" data-target=".navbar-collapse collapse">
Chỉ để hiểu giải pháp của user1040259, hãy thêm mã này vào $ (document) .ready (function () {}) của bạn;
$('.nav').click( function() {
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
});
Như họ đã đề cập, điều này không làm động việc di chuyển ... nhưng nó đóng thanh điều hướng khi lựa chọn mục
Đối với những người sử dụng AngularJS và Angular UI Router với điều này, đây là giải pháp của tôi (sử dụng chuyển đổi của mollwe). Trong đó ".navbar-main-sập" là "mục tiêu dữ liệu" của tôi.
Tạo chỉ thị:
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');
}
});
}
};
}]);
Chỉ thị sử dụng:
<div class="collapse navbar-collapse navbar-main-collapse">
<your menu>
Cái này cần phải dùng mẹo.
Yêu cầu bootstrap.js.
Ví dụ => http://getbootstrap.com/javascript/#collapse
$('.nav li a').click(function() {
$('#nav-main').collapse('hide');
});
Điều này thực hiện tương tự như việc thêm thuộc tính 'data-toggle = "sập"' và 'href = "yournavigationID"' vào các thẻ menu điều hướng.
Tôi đang sử dụng hàm mollwe, mặc dù tôi đã thêm 2 cải tiến:
a) Tránh đóng trình đơn thả xuống nếu liên kết được nhấp vào bị thu gọn (bao gồm các liên kết khác)
b) Ẩn cả menu thả xuống, nếu bạn đang nhấp vào nội dung web hiển thị.
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');
}
});
});
Không phải là chủ đề mới nhất nhưng tôi đã tìm kiếm giải pháp cho cùng một Vấn đề và tìm thấy một (kết hợp của một số chủ đề khác).
Tôi đã đưa NavButton:
<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...
một id / Định danh như:
<button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
Không phải là "Ý tưởng" tốt nhất - mà là: Phù hợp với tôi! Bây giờ bạn có thể kiểm tra khả năng hiển thị của nút của mình (với jquery) như:
var target = $('#navcop');
if(target.is(":visible")){
$('#navcop').click();
}
(LƯU Ý: Đây chỉ là một Mã được cắt ngắn! Tôi đã sử dụng Sự kiện "onclick" trên Liên kết điều hướng của mình! (Bắt đầu AJAX Reguest.)
Kết quả là: Nếu Nút ở chế độ "hiển thị" thì nó đã bị "nhấp" ... Vì vậy: Không có lỗi nếu bạn sử dụng "Chế độ xem toàn màn hình" của Bootstrap (chiều rộng trên 940px).
Chào Ralph
PS: Nó hoạt động tốt với IE9, IE10 và Firefox 25. Không kiểm tra những người khác - Nhưng tôi không thể thấy sự cố :-)
Điều này đã làm việc cho tôi. Tôi đã làm như, khi tôi nhấp vào nút menu, tôi đang thêm hoặc xóa lớp 'trong' vì bằng cách thêm hoặc xóa lớp đó, công tắc chuyển đổi hoạt động theo mặc định. 'e.stopPropagation ()' là để dừng hoạt ảnh mặc định bằng bootstrap (tôi đoán), bạn cũng có thể sử dụng 'toggleClass' thay cho thêm hoặc xóa lớp.
$ ('# ChangeToggle'). On ('click', function (e) {
if ($('.navbar-collapse').hasClass('in')) {
$('.navbar-collapse').removeClass('in');
e.stopPropagation();
} else {
$('.navbar-collapse').addClass('in');
$('.navbar-collapse').collapse();
}
});
Ví dụ: nếu biểu tượng có thể chuyển đổi của bạn chỉ hiển thị cho các thiết bị cực nhỏ, thì bạn có thể làm điều gì đó như sau:
$('[data-toggle="offcanvas"]').click(function () {
$('#side-menu').toggleClass('hidden-xs');
});
Việc nhấp vào [data-toggle = "offcanvas"] sẽ thêm .hides-xs của bootstrap vào # side-menu của tôi sẽ ẩn nội dung menu bên, nhưng sẽ hiển thị lại nếu bạn tăng kích thước cửa sổ.
nếu html menu là
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
on nav toggle 'in' lớp được thêm vào và xoá khỏi chuyển đổi. kiểm tra xem menu đáp ứng có được mở hay không, sau đó thực hiện chuyển đổi đóng.
$('.nav-collapse .nav a').on('click', function(){
if ( $( '.nav-collapse' ).hasClass('in') ) {
$('.navbar-toggle').click();
}
});
Tuggle Nav Close, câu trả lời tương thích với trình duyệt IE, không có bất kỳ lỗi giao diện điều khiển nào. Nếu bạn đang sử dụng bootstrap, hãy sử dụng
$('.nav li a').on('click', function () {
if ($("#navbar").hasClass("in")) {
$('.navbar-collapse.in').show();
}
else {
$('.navbar-collapse.in').hide();
}
})
$('.navbar-toggle').trigger('click');
Giải pháp Bootstrap 4 không cần Javascript
Thêm thuộc tính data-toggle="collapse" data-target="#navbarSupportedContent.show" vào div<div class="collapse navbar-collapse">
Đảm bảo rằng bạn cung cấp chính xác idtrongdata-target
<div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
.showlà để tránh menu nhấp nháy ở độ phân giải lớn
<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>