gpt4 book ai didi

javascript - 当 NavBar 在小屏幕上垂直时如何加载处于折叠状态的 NavBar

转载 作者:行者123 更新时间:2023-11-27 23:41:40 27 4
gpt4 key购买 nike

我是 bootstrap、jquery 和 javascript 的新手,我在一个网站上工作,但我遇到了一个问题。 . .我需要顶部的导航栏在超小屏幕上以折叠状态加载。现在,该栏在 XS 屏幕上是垂直的,但我希望它以折叠状态加载,以便用户必须单击右侧的“三栏图标”才能加载页面。无论我做什么,我都无法正确加载导航栏。如果我加载它折叠在小屏幕上,它在大屏幕上变得不可见。我已经为此工作了 2 天。我知道这很简单,但我就是想不通。其他人可以帮忙吗?

这里是相关代码……

<body id="page-top" data-spy="scroll" data-target="#nav-target">

<header id="header">

<!-- Navigation
================================================== -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav navbar-nav">
<li><a href="#page-top" style="font-size:1.5em;">Watch It Outside</a></li>
<li id="drop"><a href="#" class="fa fa-align-justify visible-xs" style="position:absolute;right:40px; top:-40px;"></a></li>
<li id="drop1"><a href="#home">Home</a></li>
<li id="drop2"><a href="http://www.boston.gov/news" target="_blank">City Of Boston News</a></li>
<li id="drop3"><a href="http://www.boston.gov/parks/public-garden" target="_blank">Boston Public Gardens</a></li>
<li id="drop4"><a href="#films" class="collapse-sm collapse-xs collapse-md">Film Information</a></li>
<li id="drop5"><a href="#register">Registration</a></li>
</ul>
</nav>


</header>
  <!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Javascript and Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script>
// Scrollspy fluide
$(function () {
$('li>a').on('click', function (e) {
var hash = this.hash;
$('html, body').animate({
scrollTop: $(this.hash).offset().top
}, 1000, function () {
window.location.hash = hash;
});
});
});
</script>



<script>
$(function() {
$('#drop').click(function() {
$('#drop1').collapse('toggle');
$('#drop2').collapse('toggle');
$('#drop3').collapse('toggle');
$('#drop4').collapse('toggle');
$('#drop5').collapse('toggle');
});

$('#drop1').click(function() {
$('#drop1').collapse('toggle');
$('#drop2').collapse('toggle');
$('#drop3').collapse('toggle');
$('#drop4').collapse('toggle');
$('#drop5').collapse('toggle');
});
$('#drop4').click(function() {
$('#drop1').collapse('toggle');
$('#drop2').collapse('toggle');
$('#drop3').collapse('toggle');
$('#drop4').collapse('toggle');
$('#drop5').collapse('toggle');
});
$('#drop5').click(function() {
$('#drop1').collapse('toggle');
$('#drop2').collapse('toggle');
$('#drop3').collapse('toggle');
$('#drop4').collapse('toggle');
$('#drop5').collapse('toggle');
});
});
</script>

我还收到一个最近在网站上弹出的奇怪错误,我现在必须点击一个链接两次才能让它在第一次关闭时关闭。从那里开始,每次点击都会切换它的折叠和展开,但第一次点击需要 2 次才能折叠导航栏。 (我不知道我改变了什么导致了这个,因为它不是那样开始的)

最佳答案

尝试类似的东西 if (device.width < 800) {
$("nav").addClass("collapsed");
}

关于javascript - 当 NavBar 在小屏幕上垂直时如何加载处于折叠状态的 NavBar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57010571/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com