1
基本上我有這個類別的菜單，當點擊加減號按鈕時，它也會在點擊父類別和子類別時進行擴展和關閉。如果您單擊子子類別，則會將您帶到一個頁面。手風琴菜單展開並關閉按鈕點擊
我想要的是 菜單隻會在點擊加減號按鈕時展開。 如果您單擊父類別或子類別，它會將您帶到頁面並保持打開狀態。加載時應該如下圖所示。僅當頂層打開時才顯示子類別。子類別僅在點擊時打開。
我想打開或打開父類別時只打開子類別。所以，如果你是加載菜單它看起來像
頂級
-sub類別
-sub類別
-sub類別
頂級
- 子類別
-sub類別
-sub類別
任何幫助理解
結帳我codepen https://codepen.io/mdaniel559/pen/QMvWwW
HTML
<div class="sidebar nobottommargin">
<!--Categories-->
<div class="menu-header">Categories</div>
<figure class="widget shadowonly r_corners wrapper m_bottom_30">
<div class="widget_content">
<!--Categories list-->
<ul class="categories_list">
<li class="active">
<a href="http://#" class="f_size_large scheme_color d_block relative">
<b>Top Level Category</b>
<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span>
</a>
<!--second level-->
<ul>
<li class="active">
<a href="#" class="d_block f_size_large color_dark relative">
Sub Category<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span>
</a>
<!--third level-->
<ul>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
</ul>
</li>
<li>
<a href="#" class="d_block f_size_large color_dark relative">
Sub Category<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span>
</a>
<!--third level-->
<ul>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
</ul>
</li>
<li>
<a href="#" class="d_block f_size_large color_dark relative">
Sub Category<span class="bg_light_color_1 r_corners f_right color_dark talign_c"></span>
</a>
<!--third level-->
<ul>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
<li><a href="#" class="color_dark d_block">Sub Sub Category</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</figure>
</div>
CSS
*{
margin:0;
padding:0;
border:none;
}
figure{display:block}
a, b, body, div, figure, html, li, span, ul{
background: transparent;
border: 0 none;
font-weight: inherit;
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top;
}
a{
text-decoration:none;
outline: none !important;
}
b{
font-weight:bold !important;
}
ul{
list-style: none;
}
html,body{
height:100%;
}
/* -----------------------------------
2. Basic classes and elements
------------------------------------- */
body{
font:300 14px/21px 'Roboto', 'sans-serif';
color:#696e6e;
background:#232830;
letter-spacing: 0.1px;
overflow-x: hidden;
-webkit-backface-visibility:hidden;
background-attachment:fixed;
}
.d_block{
display:block;
}
.f_size_large{
font-size:1.15em;
}
.r_corners{
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.relative{
position:relative;
}
.wrapper{
overflow: hidden;
}
.m_bottom_30{
margin-bottom:30px;
}
.f_right{
float:right;
}
::selection{
background: #e74c3c;
color:#fff;
}
::-moz-selection{
background: #e74c3c;
color:#fff;
}
::-o-selection {
background: #e74c3c;
color:#fff;
}
::-ms-selection {
background: #e74c3c;
color:#fff;
}
::-webkit-input-placeholder{
color:#696e6e;
}
::-moz-placeholder{
color:#696e6e;
opacity:1;
}
:-ms-input-placeholder {
color:#696e6e;
}
::-webkit-scrollbar{
width:10px;
background:#323a45;
}
::-webkit-scrollbar-thumb{
-webkit-border-radius:4px;
border-radius:4px;
}
/* -----------------------------------
3. Color Scheme
------------------------------------- */
a,a[class*="color"]:not(.color_light):hover,.scheme_color{
color:#e74c3c;
}
::-webkit-scrollbar-thumb{
background:#e74c3c;
}
/* -----------------------------------
4. Typography
------------------------------------- */
a{
-webkit-transition: color .4s ease, background-color .4s ease;
-moz-transition: color .4s ease, background-color .4s ease;
-o-transition: color .4s ease, background-color .4s ease;
transition: color .4s ease, background-color .4s ease;
}
a:hover,.color_dark{
color:#292f38;
}
.bg_light_color_1{
background:#ecf0f1;
}
/* -----------------------------------
10. Lists and navigations
------------------------------------- */
.categories_list .active > a > span:after{
opacity:1;
}
.categories_list .active > a > span:before,.categories_list a > span:after{
opacity:0;
}
.categories_list > li:last-child > a{
border:none;
}
.categories_list{
margin-top:-7px;
}
.categories_list a{
padding:7px 25px 7px 0;
border-bottom:1px solid #ecf0f1;
word-break:break-all;
}
.categories_list > li:last-child > a{
padding-bottom:0px;
}
.categories_list ul > li > a{
padding-left:20px;
}
.categories_list ul ul > li > a{
padding-left:40px;
}
.categories_list a > span{
display:block;
width:23px;
height:23px;
line-height: 23px;
position:absolute;
right:0;
top:50%;
margin-top:-11.5px;
}
.categories_list a > span:before,.categories_list a > span:after{
content:"";
width:9px;
height:9px;
background:url("../images/plusminus.png") no-repeat;
position: absolute;
display:block;
top:50%;
left:50%;
margin:-5px 0 0 -4px;
-webkit-transition:opacity .4s ease;
-moz-transition:opacity .4s ease;
-o-transition:opacity .4s ease;
transition:opacity .4s ease;
}
.categories_list a > span:after{
height:1px;
width:8px;
background-position: 0 -9px;
margin:-1px 0 0 -4px;
}
@media only screen and (-webkit-min-device-pixel-ratio:0){
.categories_list a > span:before,
.categories_list a > span:after{
margin-left:-5px;
}
}
/**** disabling Isotope CSS3 transitions ****/
.widget_content{
padding:23px 20px 25px;
background: #fff;
}
/* -----------------------------------
18. Responsive changes
------------------------------------- */
@media only screen and (max-width: 992px){
.widget_content{
padding-left:19px;
padding-right:19px;
}
}
@media only screen and (max-width:768px){
/* tables change*/
}
/* -----------------------------------
19. Retina ready
------------------------------------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144 dpi){
.categories_list a > span:before,.categories_list a > span:after{
background-image:url("../images/[email protected]");
background-size:9px 10px;
}
}
jQuery的
jQuery('button[type="reset"]:not(#styleswitcher button[type="reset"])').on('click',function(){
color.eq(0).addClass('active').parent().siblings().children('button').removeClass('active');
slider.slider("option", "values", [ 0, 237 ]);
});
jQuery('.categories_list').on('click','a',function(e){
if(jQuery(this).parent().children('ul').length){
jQuery(this).parent().toggleClass('active').end().next().slideToggle();
e.preventDefault();
}
});
jQuery('.categories_list > li > a').on('click',function(e){
if(jQuery(this).parent().children('ul').length){
jQuery(this).toggleClass('scheme_color').toggleClass('color_dark');
e.preventDefault();
}
});
這種方法對我來說很有意義。 但是我確實有一個問題。參見上面的例子 我喜歡只打開子類別，當父類別打開或點擊時打開。子子類別只有在點擊加號時纔會打開。 –
它適合你嗎？ – Mindless
加號和減號點擊展開yes作品。但是，如何只顯示子類別。最高級別是唯一一個擴展的負載。 –