折疊導航欄不適用於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>刪除“ <a class=".accordion-section-title" href="#tujuan"> Kategori</a> ”前面的句點。

要做到這一點：-> <a class="accordion-section-title" href="#tujuan"> Kategori</a>

唯一將類稱為“ .something”的時間是在HTML外部調用它時。 像CSS或JS，否則只需正常鍵入類即可。

如果您創建一個jsfiddle，我可以對其進行更深入的研究。 否則，祝您好運，編碼愉快！！

認證機構

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>