jquery中的可摺疊菜單

我有一個側面可摺疊面板，單擊箭頭圖標時隱藏了子內容，一旦隱藏，點擊箭頭時顯示子內容。有一個用於下滑和向上滑動功能的jQuery代碼，默認情況下，子內容是隱藏的，並且點擊箭頭顯示或隱藏子內容。其代碼jquery中的可摺疊菜單

jQuery(function($) { 
 
    $('.active span.clickable').on("click", function(e) { 
 
    if ($(this).hasClass('panel-collapsed')) { 
 
     // expand the panel 
 
     $(this).parents('.active').find('.collapsein').slideDown(); 
 
     $(this).removeClass('panel-collapsed'); 
 
     $(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up'); 
 
    } else { 
 
     // collapse the panel 
 
     $(this).parents('.active').find('.collapsein').slideUp(); 
 
     $(this).addClass('panel-collapsed'); 
 
     $(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="active"> 
 
    <a href="#">Main Data<span class="pull-right clickable "><i class="glyphicon glyphicon-chevron-down"></i></span></a> 
 
    <ul class="collapsein "> 
 
    <li><label>Sub Data1</label></li> 
 
    <li><label>Sub Data2</label></li> 
 
    <li><label>Sub Data3</label></li> 
 
    </ul> 
 
</li>

來源

2017-03-16 Esteann Afonso

http://stackoverflow.com/questions/10310717/toggle-show-hide-on-click-with-jquery –

如果你需要有首先隱藏起來的是suybmenu，那麼你需要先將它隱藏在CSS中：'。 collapsein {display：none; }' –

您需要添加css如果你想在默認情況下隱藏的子菜單。請按照下面的代碼，它會做你的工作::

HTML

<li class="active"> 
    <a href="#" class="clickable panel-collapsed">Main Data<span class="pull-right"><i class="glyphicon glyphicon-chevron-down"></i></span></a> 
    <ul class="collapsein "> 
     <li><label>Sub Data1</label></li> 
     <li><label>Sub Data2</label></li>   
     <li><label>Sub Data3</label></li>       
    </ul> 
</li>

CSS

.collapsein{ 
    display: none; 
}

JQUERY

jQuery(function ($) { 
$('.active a.clickable').on("click", function (e) { 
    if ($(this).hasClass('panel-collapsed')) { 
     // expand the panel 
     $(this).parents('.active').find('.collapsein').slideDown(); 
     $(this).removeClass('panel-collapsed'); 
     $(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up'); 
    } 
    else { 
     // collapse the panel 
     $(this).parents('.active').find('.collapsein').slideUp(); 
     $(this).addClass('panel-collapsed'); 
     $(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down'); 
    } 
}); 
});

Working JSFiddle :: https://jsfiddle.net/80fpe9d9/

來源

2017-03-16 10:46:50

@Esteann如果它幫助你並幫助別人，請提供答案。 –

如果你希望你的列表在默認情況下隱藏，那麼這只是一個簡單的調整。你會首先設置它的CSS顯示：無。

CSS

.collapsein { 
    display: none; 
}

，並添加類面板暈倒您可點擊跨度

HTML

<a href="#">Main Data<span class="pull-right clickable panel-collapsed"><i class="glyphicon glyphicon-chevron-down"></i></span></a>

Working JSBin

爲了清晰起見向左移動了箭頭。

來源

2017-03-16 10:48:23 Flexicon

它不工作兄弟。她也犯了一些其他的錯誤。 –

如果你的意思是當你點擊錨標籤時沒有任何反應，那就是他們設置的方式。你必須點擊右邊的雪佛龍指向下方:)我認爲可點擊的和其他類應該在錨上，但如果他們想要它在標籤然後什麼。 – Flexicon

0

感謝您的回答！必須添加CSS代碼爲它工作正常

.collapsein{ display: none; }

來源

2017-03-16 11:50:39

+0

Esanaann是Rana，Manuel和Flexicon之前告訴你的，如果有任何用戶告訴你，請不要回答正確的答案，只需標記正確的答案即可。 –

jquery中的可摺疊菜單

回答

相關問題