gpt4 book ai didi

javascript - 单击附加导航栏

转载 作者:行者123 更新时间:2023-11-28 16:12:37 24 4
gpt4 key购买 nike

我有一个带有“契约(Contract)”部分的导航栏,我想知道这是否可能,以及当标记此按钮时我将如何添加一个额外的导航栏以在下方展开,(例如,在 Apple商店网站,当你点击一个产品时,这会添加另一个栏)

Apple Navigation Bar

如果需要,我可以提供我的整个 CSS 样式表!我认为这将需要 JavaScript,但我现在正尝试将其保留为纯 CSS!

非常感谢所有帮助!

HTML 代码:这是导航 HTML

<header>
<div class="title">
<img src="img/logo2.png"/>
</div>
<div class="navbar">
<ul>
<li style="float: left"><a href="#home">Home</a></li>
<li><a href="#contact">Contracts</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#other">Other</a></li>
<li> <a href="#release">Release Notes</a></li>
<li> <a target="_blank" href="http://www.phpartnership.com">Pinnacle Health Partnership</a></li>
</ul>
</div>
</header>

创建这个

My nav bar

CSS 代码:我的整个样式表

body {
background-color: #fff;
margin: 0;
font-family: Arial;
color: #333;
}

header {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}

.navbar {
display: block;
text-align: center;
}

.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
}

.navbar li {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.navbar li:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: white;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.navbar li:hover:before, navbar li:focus:before, .navbar li:active:before {
left: 0;
right: 0;
}

.navbar li a {
padding: 25px;
display: block;
height: 100%;
color: white;
text-decoration: none;
}

.title {
height: 80px;
padding: 2px;
background-color: #fff;
}

.container {
margin-top: 150px;
padding-top: 50px;
}

.home {
margin-top: 10px;
text-align: center;
padding: 40px !important;
}
.wrap {
width: 100%;
margin: 0 auto;
}
.left_col {
float: left;
width: 50%;
}
.right_col {
float: right;
width: 50%;
}
.right_col img {
width: 80%;
margin-top: 50px;
border: 2px solid black;
border-radius: 5px;
}
.left_col img {
width: 80%;
margin-top: 50px;
border: 2px solid black;
border-radius: 5px;
}

这是我试图用来在点击时隐藏和显示 div 的 JavaScript

<script>
$(index.php).ready(function(){
``$("#contract").click(function(){
$("<div class="contracts">").toggle();
});
});
</script>

最佳答案

猜猜你想要这样的东西: jsfiddle

首先将 jQuery 添加到您的本地环境用这个<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

将其添加到 head 中你的 html 部分。更多信息请查看 how to install jQuery

.navbar 中添加了 html

<ul class="aditional">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>

添加了 CSS:

.aditional {
position:absolute;
top:100%;
width:100%;
background:#000;
display:none;
}
.aditional li {
color:#fff;
}

添加了 js :

$('.navbar ul li:nth-child(2) a').click(function() {
$(".aditional").slideToggle()
});

或者如果您想要响应更快的解决方案

检查这个:jsfiddle with target

使用data-targetli a 上像这样

<li><a href="#contact" data-target="contracts">Contracts</a></li>
<li><a href="#about" data-target="aboutus">About Us</a></li>

添加了 html :

 <ul class="aditional contracts">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
<ul class="aditional aboutus">
<li>about</li>
<li>about</li>
<li>about</li>
<li>about</li>
</ul>

jq 添加:

$('.navbar ul li a').click(function() {
$(".aditional").slideUp()
var target = '.' + $(this).data('target');
$(target).slideDown();
})

OR 您可以定位 hrefli a .只需添加这个

<li><a href="#contract">Contracts</a></li>
<li><a href="#about">About Us</a></li>
------
<ul class="aditional" id ="contract">
....
<ul class="aditional" id ="about">
....

和 js :

$('.navbar ul li a').click(function() {
$(".aditional").slideUp()
var target = $(this).attr('href');
$(target).slideDown();

})

看这里 jsfiddle

这些解决方案之一应该适合您。让我知道

关于javascript - 单击附加导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38094719/

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