- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的 Accordion 菜单仅使用 html
和 css
,但按钮由 :target
id 组成。当我按下任何按钮时,是否有任何 javascript
可以删除自动滚动?它悬停在 anchor #id
上。
stackoverflow 上有很多相关的答案,但没有一个对我有帮助,请不要只提出任何其他问题作为答案。
#aconmine {
margin: 0px auto;
width: 90% !important;
box-shadow: 0 0 5px black;
border: solid 3px white;
}
.aconmineli {
list-style: none;
border: 1px 1px 1px 1px #efefef solid;
background-color: #2A5581;
display: block
}
.aconmineli h2 {
margin: 0;
padding: 10px;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
color: #ecf0f1;
border-bottom: 1px #efefef solid;
background: #1D3D5F;
background-image: url("http://p315468.for-test-only.ru/wp-content/uploads/2014/09/down.png");
background-position: right 20px center;
background-repeat: no-repeat;
background-size: 30px auto;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.59);
}
.aconminecontent {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.73s ease-out, opacity 0.7s ease 0.3s, padding-bottom 1s ease;
-moz-transition: max-height 0.73s ease-out, opacity 0.7s ease 0.3s, padding-bottom 1s ease;
-ms-transition: max-height 0.7s ease-out, opacity 0.7s ease 0.3s, padding-bottom .5s ease;
/* IE10 is actually unprefixed */
-o-transition: max-height 0.7s ease-out, opacity 0.7s ease 0.3s, padding-bottom .5s ease;
transition: max-height 0.7s ease-out, opacity 0.7s ease 0.3s, padding .5s ease;
opacity: 0;
}
.aconminecontent:target {
max-height: 1000px !important;
border-bottom: 1px solid #EFEFEF;
overflow: visible !important;
opacity: 1;
margin-top: -220px;
padding: 200px 20px 20px 20px;
}
.aconminecontent:target .closeme {
background-image: url("http://p315468.for-test-only.ru/wp-content/uploads/2014/09/up.png");
background-position: right;
background-repeat: no-repeat;
background-size: 30px auto;
}
.aconminecontent p {
padding: 10px;
color: #ecf0f1;
margin-top: -47px;
}
.closeme {
height: 43px;
width: 100%;
display: block;
transform: translate(0, -23px);
}
.aconmineli a {
transition: height .2s ease-in-out;
height: 43px;
border-bottom-left-radius: : 10px;
text-decoration: none;
}
.aconmineli a:hover {
height: 49px !important;
display: block !important;
opacity: 1
}
<br><br><br><br><br><br><br><br><br><br>
<div id="aconmine">
<div class="aconmineli"><a href="#tab1"><h2>Пальтовая группа </h2></a>
<div id="tab1" class="aconminecontent">
<a href="#tabcloseme" class="closeme"></a>
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="aconmineli"><a href="#tab2"><h2>Костюмная группа </h2></a>
<div id="tab2" class="aconminecontent">
<a href="#tabcloseme" class="closeme"></a>
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="aconmineli"><a href="#tab3"><h2>Плательная группа </h2></a>
<div id="tab3" class="aconminecontent">
<a href="#tabcloseme" class="closeme"></a>
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="aconmineli"><a href="#tab4"><h2>Спортивные изделия </h2></a>
<div id="tab4" class="aconminecontent">
<a href="#tabcloseme" class="closeme"></a>
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="aconmineli"><a href="#tab5"><h2>Текстильно-трикотажные изделия</h2></a>
<div id="tab5" class="aconminecontent">
<a href="#tabcloseme" class="closeme"></a>
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="aconmineli"><a href="#tab6"><h2>Изделия из Кожи и Замши </h2></a>
<div id="tab6" class="aconminecontent">
<a href="#tabcloseme" class="closeme"></a>
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="aconmineli"><a href="#tab7"><h2>Изделия из Натурального Меха </h2></a>
<div id="tab7" class="aconminecontent">
<a href="#tabcloseme" class="closeme"></a>
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div style="position: fixed; top: 0px;"></div>
</div>
<br><br><br><br><br><br><br><br><br><br>
这是关于 jsfiddle 的演示我的 Accordion 。
最佳答案
这是解决方案。解释在代码中 - 相关代码行的每个注释。
$('a').click(function(event) {
event.preventDefault();
// https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY
// store the scrollY before the browser scroll to the :target
var scrollTop = window.scrollY;
// manually change the hash
location.hash = $(this).attr('href');
// scroll back to scrollTop
window.scrollTo(0, scrollTop);
});
#aconmine {
margin: 0px auto;
width: 90% !important;
box-shadow: 0 0 5px black;
border: solid 3px white;
}
.aconmineli {
list-style: none;
border: 1px 1px 1px 1px #efefef solid;
background-color: #2A5581;
display: block
}
.aconmineli h2 {
margin: 0;
padding: 10px;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
color: #ecf0f1;
border-bottom: 1px #efefef solid;
background: #1D3D5F;
background-image: url("http://p315468.for-test-only.ru/wp-content/uploads/2014/09/down.png");
background-position: right 20px center;
background-repeat: no-repeat;
background-size: 30px auto;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.59);
}
.aconminecontent {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.73s ease-out, opacity 0.7s ease 0.3s, padding-bottom 1s ease;
-moz-transition: max-height 0.73s ease-out, opacity 0.7s ease 0.3s, padding-bottom 1s ease;
-ms-transition: max-height 0.7s ease-out, opacity 0.7s ease 0.3s, padding-bottom .5s ease;
/* IE10 is actually unprefixed */
-o-transition: max-height 0.7s ease-out, opacity 0.7s ease 0.3s, padding-bottom .5s ease;
transition: max-height 0.7s ease-out, opacity 0.7s ease 0.3s, padding .5s ease;
opacity: 0;
}
.aconminecontent:target {
max-height: 1000px !important;
border-bottom: 1px solid #EFEFEF;
overflow: visible !important;
opacity: 1;
margin-top: -220px;
padding: 200px 20px 20px 20px;
}
.aconminecontent:target .closeme {
background-image: url("http://p315468.for-test-only.ru/wp-content/uploads/2014/09/up.png");
background-position: right;
background-repeat: no-repeat;
background-size: 30px auto;
}
.aconminecontent p {
padding: 10px;
color: #ecf0f1;
margin-top: -47px;
}
.closeme {
height: 43px;
width: 100%;
display: block;
transform: translate(0, -23px);
}
.aconmineli a {
transition: height .2s ease-in-out;
height: 43px;
border-bottom-left-radius: : 10px;
text-decoration: none;
}
.aconmineli a:hover {
height: 49px !important;
display: block !important;
opacity: 1
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br><br><br><br><br><br><br><br>
<div id="aconmine">
<div class="aconmineli"><a href="#tab1"><h2>Пальтовая группа </h2></a>
<div id="tab1" class="aconminecontent">
<a href="#tabcloseme" class="closeme"></a>
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="aconmineli"><a href="#tab2"><h2>Костюмная группа </h2></a>
<div id="tab2" class="aconminecontent">
<a href="#tabcloseme" class="closeme"></a>
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="aconmineli"><a href="#tab3"><h2>Плательная группа </h2></a>
<div id="tab3" class="aconminecontent">
<a href="#tabcloseme" class="closeme"></a>
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="aconmineli"><a href="#tab4"><h2>Спортивные изделия </h2></a>
<div id="tab4" class="aconminecontent">
<a href="#tabcloseme" class="closeme"></a>
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="aconmineli"><a href="#tab5"><h2>Текстильно-трикотажные изделия</h2></a>
<div id="tab5" class="aconminecontent">
<a href="#tabcloseme" class="closeme"></a>
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="aconmineli"><a href="#tab6"><h2>Изделия из Кожи и Замши </h2></a>
<div id="tab6" class="aconminecontent">
<a href="#tabcloseme" class="closeme"></a>
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="aconmineli"><a href="#tab7"><h2>Изделия из Натурального Меха </h2></a>
<div id="tab7" class="aconminecontent">
<a href="#tabcloseme" class="closeme"></a>
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div style="position: fixed; top: 0px;"></div>
</div>
<br><br><br><br><br><br><br><br><br><br>
关于javascript - 如何删除自动滚动到 div id :target?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34545329/
我有一个 div,我希望使用 css 显示为 :target。到目前为止,这工作正常。我的问题是:我希望它淡入淡出。 我的代码: Content #stuff { opacity:0;
我想找到在Rust构建中使用的libc.so文件,以便我可以使用--version进行查询。 (一些libcs通过C宏公开其版本信息,因此,它们的另一种选择是在构建脚本中使用cc条板箱。但其他诸如
我仍然不明白为什么 Makefile 中的“虚假”规则将“.PHONY”作为其目标。作为先决条件,这会更合乎逻辑。 我需要详细说明这一点吗?如果A依赖于B并且B是假的,那么A也是假的。因此,与 .PH
在 Fortran 语言中,向具有 TARGET 属性的虚拟参数的过程提供不具有 TARGET 属性的参数应该会导致无效代码。但是,当使用 gfortran (5.1.0) 或 ifort (14.0
如果有人发布过相同的问题,请原谅我,我找不到类似问题的答案。 当我单击带有 #dotNetComponents url 的按钮时,它会将我带到带有 dotNetComponents ID 的 div,
我想用 :target 伪类更改我的 html 中元素的样式。我的标记(第一个是按钮,第二个是目标元素): Call to action target CSS: #btn01:target { b
下面提到的示例代码是 Keith Wood 的 jQuery Countdown 插件的一部分。有人能解释一下吗 _attachCountdown: function(target, options)
我是 React 的新手。这绝对让我感到困惑。我可以使用 event.target 访问 HTML 元素,它显示的值等于某个数字,但每次我使用 event.target.value 时,我都会得到 u
这个问题是关于交叉编译的。 使用 swift 编译器的 -target 或 -target-cpu 选项可以使用哪些不同的目标?我在哪里可以找到概述? 它只能用于创建 iOS/watchOS 应用程序
在CKEditor 5中,我没有在链接对话框中看到目标属性的字段。 如何添加这样的字段?或将target = _blank设置为默认值。 谢谢 最佳答案 从Link Plugin的11.1.0版本开始
问题:FAKE 中是否有一个命令可以打印构建脚本中所有定义的目标? 我想以这样的方式设置我的 FAKE 构建:当我不指定目标时,它会打印构建脚本中所有可用目标的列表。 例如: > build.cmd
尝试使用 Visual Studio 2013 Update 3 创建一个新的 Cordova“空白应用程序”。 我看到了模板,但是当尝试打开空白应用程序时,我得到: The imported pro
http://download.oracle.com/javase/6/docs/api/java/lang/annotation/Target.html 此元注释指示声明的类型仅用作复杂注释类型声明
使用CocoaPods,有什么区别 target :TargetName do # Some pods... end 和 target "TargetName" do #
我正在尝试仅使用 CSS 制作一个简单的移动菜单切换。通过显示和隐藏两个按钮,这些按钮具有指向显示或隐藏导航菜单的类的不同链接。 是本教程的编辑link ,但现在我想让关闭和打开按钮位于单独的 div
以下是包含简单日志文件目标的简单 nlog 配置。我的问题是如何为 Nlog.Targets.Redis 添加目标? 最佳答案 以下是 NLog.Targets.Redis 的正确配置。如果
我想知道您是否可以将一个单元测试包链接到多个目标。因此,可以使用一个测试包测试所有应用程序目标。 我在所有应用程序目标之间有一些共享代码,但也有一些基于正在运行的应用程序目标的特定计算。 目前,如果我
我在 VSTS 中使用部署组将我的应用程序部署到本地测试 Web 服务器。 它已经运行良好很长时间了,但是在大约 6 周没有使用它之后,我现在遇到了这个错误,我想修复它; 最佳答案 您的代理未运行或无
使用 CMake 构建开源项目时(在我的例子中,它是柠檬图库),当我尝试通过 -DBUILD_SHARED_LIBS=1 构建共享库时出现此错误。 : TARGETS given no LIBRARY
尝试安装 ionic,添加 android 平台时出现以下错误 Error: Please install Android target "android-19". Hint: Run "androi
我是一名优秀的程序员,十分优秀!