收起导航栏不使用HTML，CSS和JavaScript

Question

我创建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; 
} 

我的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(); 
}); 
}); 

而我的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> 

我的问题是为什么id“tujuan”不能显示手风琴？这是我的源，我学会了：http://demos.inspirationalpixels.com/Accordion-with-HTML-CSS-&-jQuery/

谢谢

Answer 1

只是看代码，行：<a class=".accordion-section-title" href="#tujuan"> Kategori</a>删除的“.accordion”前的时期。

为了使它： - ><a class="accordion-section-title" href="#tujuan"> Kategori</a>

你是指一类的唯一时间是“.something”是当你在HTML之外调用它。像CSS或JS一样，否则就像正常一样输入类。

如果您创建了jsfiddle，我可以深入了解它。否则，祝你好运，快乐的编码！

CB

Answer 2

你错过了一些HTML，你是不是叫你的jQuery函数什么：它是当你使用它的.nav类设置为.accordion的地方。

查看示例。

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>