默認打開手風琴菜單

Question

我正在爲學校（無償作品）創建網站，並且正在嘗試設置手風琴子菜單。我有這樣的代碼，使頁面加載所有關閉而不是打開。有沒有辦法創建一個新的div，我可以發信號通知是否需要在頁面加載時默認打開「has-sub」列表。例如，是否有辦法修改我的代碼，以便在頁面加載時默認打開「產品」。在這裏，我希望所有列表項目（例如產品1，產品2）都可見。但是，在這種情況下，我希望隱藏其他列表（即Athletics和About）。

下面是我的代碼，這裏是我工作的一個環節：提前爲您的幫助https://jsfiddle.net/mhav5gtf/

(function($) { 
 
$(document).ready(function() { 
 
$('#Accordion ul ul li:odd').addClass('odd'); 
 
$('#Accordion ul ul li:even').addClass('even'); 
 
$('#Accordion > ul > li > a').click(function() { 
 
    $('#Accordion li').removeClass('active'); 
 
    $(this).closest('li').addClass('active'); \t 
 
    var checkElement = $(this).next(); 
 
    if((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
 
    $(this).closest('li').removeClass('active'); 
 
    checkElement.slideUp('normal'); 
 
    } 
 
    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
 
    $('#Accordion ul ul:visible').slideUp('normal'); 
 
    checkElement.slideDown('normal'); 
 
    } 
 
    if($(this).closest('li').find('ul').children().length == 0) { 
 
    return true; 
 
    } else { 
 
    return false; \t 
 
    } \t \t 
 
}); 
 
}); 
 
})(jQuery);

@import url(http://fonts.googleapis.com/css?family=Lato); 
 
@charset "UTF-8"; 
 
/* Base Styles */ 
 

 
#Accordion ul li.test { 
 
    border-bottom: 1px solid #c9c9c9; 
 
} 
 
#Accordion ul li.test a { 
 
    background: #e5e5e5; 
 
} 
 
#Accordion ul li.test:last-child { 
 
    border: none; 
 
} 
 
/*dont test*/ 
 

 
#Accordion, 
 
#Accordion ul, 
 
#Accordion li, 
 
#Accordion a { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    list-style: none; 
 
    font-weight: normal; 
 
    text-decoration: none; 
 
    line-height: 1; 
 
    font-family: 'Lato', sans-serif; 
 
    font-size: 14px; 
 
    position: relative; 
 
} 
 
#Accordion a { 
 
    line-height: 1.3; 
 
    padding: 6px 15px; 
 
} 
 
#Accordion { 
 
    width: 200px; 
 
} 
 
#Accordion > ul > li { 
 
    cursor: pointer; 
 
    background: #000; 
 
    border-bottom: 1px solid #4c4e53; 
 
} 
 
#Accordion > ul > li:last-child { 
 
    border-bottom: 1px solid #3e3d3c; 
 
} 
 
#Accordion > ul > li > a { 
 
    font-size: 13px; 
 
    display: block; 
 
    color: #ffffff; 
 
    text-shadow: 0 1px 1px #000; 
 
    background: #64676e; 
 
    background: -moz-linear-gradient(#64676e 0%, #4c4e53 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #64676e), color-stop(100%, #4c4e53)); 
 
    background: -webkit-linear-gradient(#64676e 0%, #4c4e53 100%); 
 
    background: linear-gradient(#64676e 0%, #4c4e53 100%); 
 
} 
 
#Accordion > ul > li > a:hover { 
 
    text-decoration: none; 
 
} 
 
#Accordion > ul > li.active { 
 
    border-bottom: none; 
 
} 
 
#Accordion > ul > li.active > a { 
 
    background: #e6a83d!important; 
 
    background: -moz-linear-gradient(#97c700 0%, #709400 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #97c700), color-stop(100%, #709400)); 
 
    background: -webkit-linear-gradient(#97c700 0%, #709400 100%); 
 
    background: linear-gradient(#97c700 0%, #709400 100%); 
 
    color: #002855; 
 
    text-shadow: none; 
 
} 
 
#Accordion > ul > li.has-sub > a:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 10px; 
 
    right: 10px; 
 
    border: 5px solid transparent; 
 
    border-left: 5px solid #ffffff; 
 
} 
 
#Accordion > ul > li.has-sub.active > a:after { 
 
    right: 14px; 
 
    top: 12px; 
 
    border: 5px solid transparent; 
 
    border-top: 5px solid #4e5800; 
 
} 
 
/* Sub menu */ 
 
#Accordion ul ul { 
 
    padding: 0; 
 
    display: none; 
 
} 
 
#Accordion ul ul a { 
 
    background: #efefef; 
 
    display: block; 
 
    color: #797979; 
 
    font-size: 13px; 
 
} 
 
#Accordion ul ul li { 
 
    border-bottom: 1px solid #c9c9c9; 
 
} 
 
#Accordion ul ul li.odd a { 
 
    background: #e5e5e5; 
 
} 
 
#Accordion ul ul li:last-child { 
 
    border: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="Accordion"><img src="https://stephen-wisner-7fpk.squarespace.com/s/Sidebar-Menu-Programs.jpg"> 
 
<ul> 
 
    <li></li> 
 
    <li class="has-sub"><a href="#"><span>Athletics</span></a> 
 
    <ul> 
 
    <li class="even active"><a href="#"><span>Sports Offered</span></a></li> 
 
    <li class="odd"><a href="#"><span>Directions to Events</span></a></li> 
 
    </ul> 
 
    </li> 
 
    <li class="has-sub"><a href="#"><span>Products</span></a> 
 
     <ul> 
 
     <li class="even"><a href="#"><span>Product 1</span></a></li> 
 
     <li class="odd"><a href="#"><span>Product 2</span></a></li> 
 
     <li class="last even"><a href="#"><span>Product 3</span></a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="has-sub"><a href="#"><span>About</span></a> 
 
     <ul> 
 
     <li class="odd"><a href="#"><span>Company</span></a></li> 
 
     <li class="last even"><a href="#"><span>Contact</span></a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="last"><a href="#"><span>Contact</span></a></li> 
 
</ul> 
 
</div>

感謝。

Answer 1

下面的CSS添加到您的底部，那麼只需確保你想開立有類active在你的HTML：

#Accordion > ul > li.active > ul{ 
    display: block; 
} 


<li class="even active"><a href="#"><span>Sports Offered</span></a></li> 

注意，，爲了這個正常工作，您需要刪除您目前位於ul頂部的空的<li></li>。如果你有那個創建頂部黑色邊框，你應該用CSS代替。 See this jsFiddle