[英]Collapse navbar doesn't work with HTML, CSS, and JavaScript
I created CSS: 我创建了CSS:
.nav{
right: 0px;
left: 0px;
margin-top: 0px;
margin-bottom:20px;
height: 35px;
text-align: center;
background-color: red;
z-index: 1;
}
.sticky {
background: #000;
text-align: center;
margin: 0 auto;
position: fixed;
z-index: 9999;
border-top: 0;
top: 0px;
font-size: 17px;
box-shadow: 0px 0px 3px 0px #949494;
background: #10b5fa;
padding-top: 6px;
}
.accordion-section-title {
width:100%;
padding:10px;
display:inline-block;
border-bottom:1px solid #1a1a1a;
background:#333;
transition:all linear 0.15s;
/* Type */
font-size:1.200em;
text-shadow:0px 1px 0px #1a1a1a;
color:#fff;
text-decoration: none;
}
.accordion-section-title.active, .accordion-section-title:hover {
background:#4c4c4c;
/* Type */
text-decoration:none;
}
/*----- Section Content -----*/
.accordion-section-content {
padding:10px;
display:none;
}
My JavaScript 我的JavaScript
jQuery(document).ready(function() {
function close_accordion_section() {
jQuery('.accordion .accordion-section-title').removeClass('active');
jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
jQuery('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = jQuery(this).attr('href');
if(jQuery(e.target).is('.active')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section title
jQuery(this).addClass('active');
// Open up the hidden content panel
jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
And my HTML: 而我的HTML:
<nav class="nav sticky">
<a class=".accordion-section-title" href="#tujuan"> Kategori</a>
<div id="tujuan" class="accordion-section-content">
<p>Hello World</p>
</div>
</nav>
My question is why id "tujuan" didn't work to show accordion? 我的问题是为什么id“ tujuan”无法显示手风琴? This is my source that I learned: http://demos.inspirationalpixels.com/Accordion-with-HTML-CSS-&-jQuery/
这是我从中学到的资料: http : //demos.inspirationalpixels.com/Accordion-with-HTML-CSS-&-jQuery/
Thank you 谢谢
Just looking at the code, the line: <a class=".accordion-section-title" href="#tujuan"> Kategori</a>
remove the period in front of ".accordion". 仅查看代码,该行:
<a class=".accordion-section-title" href="#tujuan"> Kategori</a>
删除“ <a class=".accordion-section-title" href="#tujuan"> Kategori</a>
”前面的句点。
To make it: --> <a class="accordion-section-title" href="#tujuan"> Kategori</a>
要做到这一点:->
<a class="accordion-section-title" href="#tujuan"> Kategori</a>
The only times you refer to a class as ".something" is when you are calling it outside of HTML. 唯一将类称为“ .something”的时间是在HTML外部调用它时。 Like CSS or JS, otherwise just type the class as normal.
像CSS或JS,否则只需正常键入类即可。
If you create a jsfiddle, I can take a deeper look into it. 如果您创建一个jsfiddle,我可以对其进行更深入的研究。 Otherwise, good luck and happy coding!!
否则,祝您好运,编码愉快!!
CB 认证机构
You're missing some HTML and you aren't calling anything with your jQuery function: it's set to .accordion
when you are using the .nav
class in it's place. 您缺少一些HTML,并且没有使用jQuery函数调用任何内容:当您使用
.nav
类时,它会设置为.accordion
。
See example. 参见示例。
jQuery(document).ready(function() { function close_accordion_section() { jQuery('.nav .accordion-section-title').removeClass('active'); jQuery('.nav .accordion-section-content').slideUp(300).removeClass('open'); } jQuery('.accordion-section-title').click(function(e) { // Grab current anchor value var currentAttrValue = jQuery(this).attr('href'); if (jQuery(e.target).is('.active')) { close_accordion_section(); } else { close_accordion_section(); // Add active class to section title jQuery(this).addClass('active'); // Open up the hidden content panel jQuery('.nav ' + currentAttrValue).slideDown(300).addClass('open'); } e.preventDefault(); }); });
.nav { right: 0px; left: 0px; margin-top: 0px; margin-bottom: 20px; height: 35px; text-align: center; background-color: red; z-index: 1; } .sticky { background: #000; text-align: center; margin: 0 auto; position: fixed; z-index: 9999; border-top: 0; top: 0px; font-size: 17px; box-shadow: 0px 0px 3px 0px #949494; background: #10b5fa; padding-top: 6px; } .accordion-section-title { width: 100%; padding: 10px; display: inline-block; border-bottom: 1px solid #1a1a1a; background: #333; transition: all linear 0.15s; /* Type */ font-size: 1.200em; text-shadow: 0px 1px 0px #1a1a1a; color: #fff; text-decoration: none; } .accordion-section-title.active, .accordion-section-title:hover { background: #4c4c4c; /* Type */ text-decoration: none; } /*----- Section Content -----*/ .accordion-section-content { padding: 10px; display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <nav class="nav sticky"> <div class="accordion-section"><a class="accordion-section-title" href="#tujuan"> Kategori</a> <div id="tujuan" class="accordion-section-content"> <p>Hello World</p> </div> </div> </nav>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.