- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我准备了一个 css,其中相同的样式在一个案例中按预期工作,而进一步,嵌套导航不再。
我的目标是在下拉菜单下方显示导航。
该应用程序用于引导 4,但导航非常自定义
.nav-center-nested
与 first nested nav
和 second nested nav
一起使用 - 但与第二个相同style
(相同的html
)工作方式不同
$(document).ready(function () {
const toggleSpeed = 50, toggleFade = "slow";
$('div[data-v]').on('click', function (event) {
if ($(event.target).prop('tagName') !== 'A') {
var that = this,
nav = $('#main-nav'),
absoluteWrapper = nav.find('div[data-w="' + $(that).data('v') + '"]'),
allAbsoluteWrappers = nav.find('div[data-w]'),
list = {};
if (!$(that).attr('was')) {
if ($(that).attr('name') == 'main-nav') {
nav.find('div[data-p]').each(function () { var that = this; $(that).hide(); });
nav.find('div[name="main-nav"]').each(function () { var that = this; $(that).removeAttr('was'); });
$(that).attr('was', 'here');
if (absoluteWrapper.length != 0) {
allAbsoluteWrappers.removeClass('py-3');
absoluteWrapper.addClass('py-3');
} else {
allAbsoluteWrappers.removeClass('py-3');
}
}
} else {
$(that).removeAttr('was');
allAbsoluteWrappers.removeClass('py-3');
}
if ($(that).children('[id="nav-btn-childrens-' + $(that).data('v') + '"]').length != 0) {
list = nav.find('div[id="nav-nested-childrens-' + $(that).data('v') + '"]').children();
} else {
list = nav.find('div[data-p=' + $(that).data('v') + ']');
}
if (list != 'undefined' || list != null || list.length != 0) {
list.each(function () {
var that = this;
if ($(that).css('display') == "none") { // || $(that).attr('name', 'nav-dropdown')
$(that).show(toggleSpeed, function () { $(that).fadeIn(toggleFade); });
//if ($(that).attr('name', 'nav-dropdown')) {
// $(that).css('display', 'inline')
//}
} else {
$(that).hide(toggleSpeed, function () { $(that).fadeOut(toggleFade); });
nav.find('div[id="nav-nested-childrens-' + $(that).data('v') + '"]').children().each(function () {
var that = this;
$(that).hide(toggleSpeed, function () { $(that).fadeOut(toggleFade); });
});
}
});
}
}
});
});
#main-nav a {
z-index: 1000;
}
.logo-nav {
position: absolute;
top: 0;
right: 95%;
width: 75px;
z-index: 999;
}
.nav-center {
display: flex;
justify-content: center;
}
.nav-center-nested {
position: absolute !important;
top: 100%;
left: 50%;
transform: translate(-50%, 0%);
z-index: 998;
width: 100%;
}
.nav-btn-clear {
border-width: 0;
border-style: none;
border-color: transparent;
border-image: none;
background-color: transparent;
outline: none !important;
box-shadow: none !important;
}
.nav-margin {
margin-left: 25%;
margin-right: 25%;
}
.nav-padding {
padding-left: 25%;
padding-right: 25%;
}
.nav-btn:hover {
background-color: rgba(255, 255, 255, 0.4);
}
.nav-btn-margin {
margin-top: -1rem;
margin-bottom: -1rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
.nav-btn-center {
text-align: center;
}
.nav-btn-right {
text-align: right;
}
.nav-btn-left {
text-align: left;
max-width: 50px;
}
.kuguar-sport-color {
background-color: rgba(227, 30, 36, 1);
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="categories" class="col kuguar-sport-color no-padding no-margin">
<nav id="main-nav">
<div class="row nav-margin p-3 text-center"><div name="main-nav" class="col nav-btn nav-btn-margin" data-v="138"><button class="nav-btn-clear text-light"> Aktualności</button></div><div name="main-nav" class="col nav-btn nav-btn-margin" data-v="139"><button class="nav-btn-clear text-light"> O nas</button></div><div name="main-nav" class="col nav-btn nav-btn-margin" data-v="140"><button class="nav-btn-clear text-light"> Rowery</button></div></div><div class="position-relative"><div data-w="139" name="nav-first" class="nav-center-nested row no-margin nav-padding text-center kuguar-sport-color"><div style="display: none;" class="nav-btn nav-btn-margin col" data-p="139" data-v="376"><a class="text-light" href="#"> o nas1</a><button id="nav-btn-childrens-376" class="nav-btn-clear text-light"><i style="color: white;" class="fa fa-chevron-circle-down" aria-hidden="true"></i></button></div><div class="position-relative"><div id="nav-nested-childrens-376" class="nav-center-nested row text-center"><div style="display: none;" class="col nav-btn nav-btn nav-btn-margin" data-p="376" data-v="379"><a class="text-light" href="#"> o nas11</a></div><div style="display: none;" class="col nav-btn nav-btn nav-btn-margin" data-p="376" data-v="380"><a class="text-light" href="#"> o nas12</a></div></div></div><div style="display: none;" class="nav-btn nav-btn-margin col" data-p="139" data-v="377"><a class="text-light" href="#"> o nas2</a></div><div style="display: none;" class="nav-btn nav-btn-margin col" data-p="139" data-v="378"><a class="text-light" href="#"> o nas3</a></div></div></div><div class="position-relative"><div data-w="140" name="nav-first" class="nav-center-nested row no-margin nav-padding text-center kuguar-sport-color"><div style="display: none;" class="nav-btn nav-btn-margin col" data-p="140" data-v="368"><a class="text-light" href="#"> Górskie</a><button id="nav-btn-childrens-368" class="nav-btn-clear text-light"><i style="color: white;" class="fa fa-chevron-circle-down" aria-hidden="true"></i></button></div><div class="position-relative"><div id="nav-nested-childrens-368" class="nav-center-nested row text-center"><div style="display: none;" class="col nav-btn nav-btn nav-btn-margin" data-p="368" data-v="371"><a class="text-light" href="#"> testgorskie</a></div><div style="display: none;" class="col nav-btn nav-btn nav-btn-margin" data-p="371" data-v="372"><a class="text-light" href="#"> testgorskie2</a></div><div style="display: none;" class="col nav-btn nav-btn nav-btn-margin" data-p="372" data-v="373"><a class="text-light" href="#"> testgorskie3</a></div><div style="display: none;" class="col nav-btn nav-btn nav-btn-margin" data-p="368" data-v="374"><a class="text-light" href="#"> testgorskie1-1</a></div><div style="display: none;" class="col nav-btn nav-btn nav-btn-margin" data-p="368" data-v="375"><a class="text-light" href="#"> testgorskie1-2</a></div></div></div><div style="display: none;" class="nav-btn nav-btn-margin col" data-p="140" data-v="369"><a class="text-light" href="#"> Miejskie</a></div><div style="display: none;" class="nav-btn nav-btn-margin col" data-p="140" data-v="370"><a class="text-light" href="#"> Dziecięce</a><button id="nav-btn-childrens-370" class="nav-btn-clear text-light"><i style="color: white;" class="fa fa-chevron-circle-down" aria-hidden="true"></i></button></div><div class="position-relative"><div id="nav-nested-childrens-370" class="nav-center-nested row text-center"><div style="display: none;" class="col nav-btn nav-btn nav-btn-margin" data-p="370" data-v="381"><a class="text-light" href="#"> Dziecięce1</a></div><div style="display: none;" class="col nav-btn nav-btn nav-btn-margin" data-p="370" data-v="382"><a class="text-light" href="#"> Dziecięce2</a></div><div style="display: none;" class="col nav-btn nav-btn nav-btn-margin" data-p="382" data-v="383"><a class="text-light" href="#"> Dziecięce21</a></div></div></div></div></div>
</nav>
</div>
问题当我将 kuguar-sport-color
添加到嵌套导航时,如何将嵌套导航从右侧移动到下拉列表的底部 - 颜色剂量工作
谢谢!
最佳答案
我已将嵌套子菜单移动到 nav-btn-margin
内的相对位置。还为子菜单添加了 inner-dropdown
类。
尝试此解决方案并发表评论以获得进一步的帮助。
$(document).ready(function() {
const toggleSpeed = 50,
toggleFade = "slow";
$('div[data-v]').on('click', function(event) {
if ($(event.target).prop('tagName') !== 'A') {
var that = this,
nav = $('#main-nav'),
absoluteWrapper = nav.find('div[data-w="' + $(that).data('v') + '"]'),
allAbsoluteWrappers = nav.find('div[data-w]'),
list = {};
if (!$(that).attr('was')) {
if ($(that).attr('name') == 'main-nav') {
nav.find('div[data-p]').each(function() {
var that = this;
$(that).hide();
});
nav.find('div[name="main-nav"]').each(function() {
var that = this;
$(that).removeAttr('was');
});
$(that).attr('was', 'here');
if (absoluteWrapper.length != 0) {
allAbsoluteWrappers.removeClass('py-3');
absoluteWrapper.addClass('py-3');
} else {
allAbsoluteWrappers.removeClass('py-3');
}
}
} else {
$(that).removeAttr('was');
allAbsoluteWrappers.removeClass('py-3');
}
if ($(that).children('[id="nav-btn-childrens-' + $(that).data('v') + '"]').length != 0) {
list = nav.find('div[id="nav-nested-childrens-' + $(that).data('v') + '"]').children();
} else {
list = nav.find('div[data-p=' + $(that).data('v') + ']');
}
if (list != 'undefined' || list != null || list.length != 0) {
list.each(function() {
var that = this;
if ($(that).css('display') == "none") { // || $(that).attr('name', 'nav-dropdown')
$(that).show(toggleSpeed, function() {
$(that).fadeIn(toggleFade);
});
//if ($(that).attr('name', 'nav-dropdown')) {
// $(that).css('display', 'inline')
//}
} else {
$(that).hide(toggleSpeed, function() {
$(that).fadeOut(toggleFade);
});
nav.find('div[id="nav-nested-childrens-' + $(that).data('v') + '"]').children().each(function() {
var that = this;
$(that).hide(toggleSpeed, function() {
$(that).fadeOut(toggleFade);
});
});
}
});
}
}
});
});
* {
box-sizing: border-box;
}
#main-nav a {
z-index: 1000;
}
.logo-nav {
position: absolute;
top: 0;
right: 95%;
width: 75px;
z-index: 999;
}
.nav-center {
display: flex;
justify-content: center;
}
.nav-center-nested {
position: absolute !important;
top: 100%;
left: 50%;
transform: translate(-50%, 0%);
z-index: 998;
width: 100%;
}
.nav-btn-clear {
border-width: 0;
border-style: none;
border-color: transparent;
border-image: none;
background-color: transparent;
outline: none !important;
box-shadow: none !important;
}
.nav-margin {
margin-left: 25%;
margin-right: 25%;
}
.nav-padding {
padding-left: 25%;
padding-right: 25%;
}
.nav-btn:hover {
background-color: rgba(255, 255, 255, 0.4);
}
.nav-btn-margin {
margin-top: -1rem;
margin-bottom: -1rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
.nav-btn-center {
text-align: center;
}
.nav-btn-right {
text-align: right;
}
.nav-btn-left {
text-align: left;
max-width: 50px;
}
.kuguar-sport-color {
background-color: rgba(227, 30, 36, 1);
}
.inner-dropdown {
position: absolute;
top: 100%;
z-index: 1000;
left: 0;
background: #e31e24;
width: 100%;
max-width: 180px;
margin: 0 auto;
right: 0;
}
.inner-dropdown a {
display: block;
padding: 4px 10px 5px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="categories" class="col kuguar-sport-color no-padding no-margin">
<nav id="main-nav">
<div class="row nav-margin p-3 text-center">
<div name="main-nav" class="col nav-btn nav-btn-margin" data-v="138">
<button class="nav-btn-clear text-light"> Aktualności</button>
</div>
<div name="main-nav" class="col nav-btn nav-btn-margin" data-v="139">
<button class="nav-btn-clear text-light"> O nas</button>
</div>
<div name="main-nav" class="col nav-btn nav-btn-margin" data-v="140">
<button class="nav-btn-clear text-light"> Rowery</button>
</div>
</div>
<div class="position-relative">
<div data-w="139" name="nav-first" class="nav-center-nested row no-margin nav-padding text-center kuguar-sport-color">
<div style="display: none;" class="nav-btn nav-btn-margin col position-relative" data-p="139" data-v="376"><a class="text-light" href="#"> o nas1</a>
<button id="nav-btn-childrens-376" class="nav-btn-clear text-light"><i style="color: white;" class="fa fa-chevron-circle-down" aria-hidden="true"></i></button>
<div id="nav-nested-childrens-376" class="text-left inner-dropdown">
<div style="display: none;" class="" data-p="376" data-v="379"><a class="text-light" href="#"> o nas11</a></div>
<div style="display: none;" class="" data-p="376" data-v="380"><a class="text-light" href="#"> o nas12</a></div>
</div>
</div>
<div style="display: none;" class="nav-btn nav-btn-margin col position-relative" data-p="139" data-v="377"><a class="text-light" href="#"> Górskie</a>
<button id="nav-btn-childrens-377" class="nav-btn-clear text-light"><i style="color: white;" class="fa fa-chevron-circle-down" aria-hidden="true"></i></button>
<div id="nav-nested-childrens-377" class="inner-dropdown text-left">
<div style="display: none;" class="" data-p="377" data-v="371"><a class="text-light" href="#"> testgorskie</a></div>
<div style="display: none;" class="" data-p="377" data-v="372"><a class="text-light" href="#"> testgorskie2</a></div>
<div style="display: none;" class="" data-p="377" data-v="373"><a class="text-light" href="#"> testgorskie3</a></div>
<div style="display: none;" class="" data-p="377" data-v="374"><a class="text-light" href="#"> testgorskie1-1</a></div>
<div style="display: none;" class="" data-p="377" data-v="375"><a class="text-light" href="#"> testgorskie1-2</a></div>
</div>
</div>
<div style="display: none;" class="nav-btn nav-btn-margin col position-relative" data-p="139" data-v="378"><a class="text-light" href="#"> Dziecięce</a>
<button id="nav-btn-childrens-378" class="nav-btn-clear text-light"><i style="color: white;" class="fa fa-chevron-circle-down" aria-hidden="true"></i></button>
<div id="nav-nested-childrens-378" class="inner-dropdown text-left">
<div style="display: none;" class="" data-p="378" data-v="381"><a class="text-light" href="#"> Dziecięce1</a></div>
<div style="display: none;" class="" data-p="378" data-v="382"><a class="text-light" href="#"> Dziecięce2</a></div>
<div style="display: none;" class="" data-p="378" data-v="383"><a class="text-light" href="#"> Dziecięce21</a></div>
</div>
</div>
</div>
</div>
</nav>
</div>
关于html - 第二个位置绝对包装器的行为与第一个不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55349200/
我想创建一个基于 jQuery 的非常简单的 html 编辑器(不是所见即所得)。 我的问题是如何制作 textarea或 div可能 在上面写一些文字 然后样式即标签(例如 some stuff 将
根据文档 isset 条款“测试此项目中是否已设置给定属性”。我不明白设置属性时 isset 返回 true 还是 false 在下面的代码片段中,当 env.JAVA_HOME 未设置时,java.
我正在尝试取消映射 o这是执行 :only 的默认命令( :help :only ),所以我尝试的第一件事是: nmap o 这种作品,除非我按 ,等待超过timeoutlen ms 然后按 o
我有以下型号: class MetaData(models.Model): created_at = models.DateTimeField(auto_now_add=True, auto_
下面列出了两行代码。两者对日期和时间的期望相同,但只有一个有效。我正在使用 R 3.1。 以下不起作用: DateTime2=strftime("08/13/2010 05:26:24.350", f
我有一个关于 C 代码的问题。 #include void foo(void){ int a; printf("%d\n",a); } void bar(void){
如果文件大小 > 8k,为什么读取的最后一个字节 = 0? private static final int GAP_SIZE = 8 * 1024; public static void main(
我有一个命令 Get-Testdata从不同来源检索测试数据并将这些数据存储到 PSObject以不同的值作为属性。然后将对象总数存储为数组,以便于操作、排序、计算等。 我的问题是我希望能够将这些数据
我正在使用 epoll 将大消息写入使用 HTTP 协议(protocol)的服务器。 fds 都设置为非阻塞,我正在使用边缘触发事件。我知道对于 EPOLLIN,我需要循环读取 fd,直到返回 EA
这对我来说听起来很奇怪: $test_1 = 'string'; $test_2 = '0'; var_dump(intval($test_1)); // Output: int 0 var_dump
这个问题在这里已经有了答案: Java: Integer equals vs. == (7 个回答) 7年前关闭。 请您解释以下行为。 public class EqAndRef { publ
Drupal 的行为到底是什么? 它为模块开发人员提供什么类型的服务层? 它映射到 jQuery.ready 的关系类型是什么? 最佳答案 长版:Drupal.behaviors 不仅仅是 jQuer
以下代码: dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), ^{ for (int i=0
人们可以将项目添加到数据库中。我让他们选择在此时添加它,或手动选择日期。 因此我得到了这个 HTML 结构。 (请注意,我将日期和时间选择器妥协为只有一行文本) Selec
创建了一个数据框: simpleDF is.na(simpleDF$vals) [1] TRUE TRUE FALSE > is.nan(simpleDF$vals) [1] FALSE TRU
我有一个大的 docker 镜像 A,我创建了一个新的 Dockerfile FROM A RUN rm /big-folder 我尝试使用以下方法构建图像: docker build --squas
我想知道以下情况下 JVM 的行为是什么: JVM 最小堆大小 = 500MB JVM 最大堆大小 = 2GB 操作系统有 1GB 内存 JVM启动后,程序运行一段时间后,使用内存超过1GB。我想知道
我们正在使用 spikeearrest 策略,但我们不了解其工作原理。峰值逮捕配置如下: 5pm 阅读文档,我们了解到,如果我们在一分钟内调用此流超过 5 次,则该策略将在第 5 次之后
我正在使用 cURL 发送 POST 请求: curl http://tarvos.local:8080/partial_Users/2 -d '{currentPage : 1, firstID :
我的表中有 6442670 条记录,我正在使用以下命令获取它们jdbctemplate 使用行号一次 1000000 个。以下是查询 select * from (select rowNum rn
我是一名优秀的程序员,十分优秀!