堆棧內存溢出
  簡體   English   中英

手風琴菜單展開並單擊按鈕關閉

[英]accordion menu expand and close on button click

 原文  2017-08-09 01:54:12  4   1    javascript/ jquery/ html/ css/ menu

問題描述

基本上，我有這個類別菜單，當單擊加減按鈕時會展開和關閉，在單擊父類別和子類別時也是如此。 如果單擊子子類別，則會帶您進入頁面。

我要的是菜單僅在單擊加減按鈕時才會展開。 如果單擊“父類別”或“子類別”，它將帶您進入頁面並保持打開狀態。 加載后應如下圖所示。 僅在打開“頂層”時顯示打開的子類別。 子子類別僅在單擊時打開。

當父類別打開或單擊時，我只想打開子類別。 因此，如果要加載菜單，它將看起來像

頂層

-子類別

-子類別

-子類別

頂層

-子類別

-子類別

-子類別

任何幫助表示贊賞

簽出我的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/plusminus@2x.png");
        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();
    }
  });

1 個解決方案

解決方案1
 0 已采納  2017-08-09 02:27:35

好的，所以，如果我理解正確，則只想在單擊+按鈕時擴展滑塊。

這是我所做的，而不是單擊a標記，而是單擊a標記內的span標記，該標記是加號，現在因為span是a標記的子代，則必須添加另一個級別的parent（）對於slideToggle（）。

然后只需像往常一樣向標簽添加鏈接，現在它是： 

<a href="#"></a>

您應該將其更改為： 

<a href="/contact"></a>


  jQuery('.categories_list').on('click','span',function(e){ if(jQuery(this).parent().parent().children('ul').length){ jQuery(this).parent().parent().toggleClass('active').end().next().slideToggle(); e.preventDefault(); } }); 
 *{ 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("http://velikorodnov.com/html/flatastic/classic/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("http://velikorodnov.com/html/flatastic/classic/images/plusminus@2x.png"); background-size:9px 10px; } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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="#" 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>

更新，僅顯示第一級和第二級，將style =“ display：none”設置為第三級列表，並將類設置為僅在第一級li上處於活動狀態 

 jQuery('.categories_list').on('click','span',function(e){ if(jQuery(this).parent().parent().children('ul').length){ jQuery(this).parent().parent().toggleClass('active').end().next().slideToggle(); e.preventDefault(); } }); 
 *{ 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("http://velikorodnov.com/html/flatastic/classic/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("http://velikorodnov.com/html/flatastic/classic/images/plusminus@2x.png"); background-size:9px 10px; } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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"> <!-- class active --> <a href="#" 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> <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 style="display:none;"> <!-- display none --> <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 style="display:none;"> <!-- display none --> <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 style="display:none;"> <!-- display none --> <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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 折疊/展開按鈕上的折疊單擊 展開和關閉手風琴引導程序 反應-使用引導程序創建手風琴不會在單擊時擴展/關閉 折疊/展開手風琴菜單 手風琴菜單展開 - 菜單更改 手風琴菜單打開和關閉 單擊第二次關閉手風琴 CSS手風琴關閉點擊 單擊打開手風琴，單擊第二次關閉手風琴 單擊其他按鈕打開/關閉移動菜單
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM