Twitter Bootstrap Accordion and button dropdown overflow issue

前端 未结 10 1746
一个人的身影
一个人的身影 2021-02-12 12:25

I\'m using Bootstrap for a section of my website. I mix accordion with a dropdown button. The problem comes when the button is on the bottom, the drop-down is hidden since the .

10条回答
  •  予麋鹿
    予麋鹿 (楼主)
    2021-02-12 12:58

    add an id to the dropdown toggle link.

    example:

    id="actionButton"
    

    and with jQuery

    function actionButtonExpand() {
        var actionButtonDropdownMenuHeight=$(this).parent().children(".dropdown-menu").height()+19;
        var actionButtonAccordionBodyHeight = $(this).parent().parent().parent().height();
        var actionButtonAccordionBodyExtended = actionButtonDropdownMenuHeight+actionButtonAccordionBodyHeight;
            $(this).dropdown();
            if($(this).parent().hasClass("open")){        
                $(this).parent().parent().parent().css("height","");
                $(this).parent().css("margin-bottom","9px");
            } else {
                $(this).parent().parent().parent().height(actionButtonAccordionBodyExtended);
                $(this).parent().css("margin-bottom",actionButtonDropdownMenuHeight);
            }
        }
    
    function actionButtonContract() {
        $("#actionButton").parent().parent().parent().css("height","");
        $("#actionButton").parent().css("margin-bottom","9px");
    
    }                           
    $("#actionButton").click(actionButtonExpand);
    $(".accordion-toggle").click(actionButtonContract);
    

    http://jsfiddle.net/baptme/6yAnc/

提交回复
热议问题