亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何將側板高度同步到動態高度？

如何將側板高度同步到動態高度？

皈依舞 2023-11-13 10:40:39
當我的 div 內容變大時，我的側面板高度不會擴大。我已將高度設置為 100%，它對于移動視圖工作正常，但對于桌面視圖，有時我的側邊欄高度不會增加，因為它是固定的。但我希望這個高度隨著我的 div 內容而動態變化。這是我的整個代碼：JSFiddle在這里你可以看到，如果你點擊導航欄，它會打開導航欄，在下面你會看到側欄和 div 內容不在同一高度。這是我遇到的問題：我想要擴大側邊欄。我該如何解決這個問題？我只能說我必須改變這個 css 類的高度，但是如何改變？：.sidepanel {    height: 100%;     width: 0;     position: absolute;     z-index: 1;    left: 0;    background-color: #221F20;     overflow-x: hidden;     padding-top: 40px;     transition: 0.3s;}
查看完整描述

2 回答

?
楊__羊羊

TA貢獻1943條經驗 獲得超7個贊

如果你補充position: relative你的身體，你的問題應該得到解決。


$(document).ready(function() {

    //sidepanel navigation

    $(".toggleButton").on("click", function() {

        if ($(".sidepanel").css("width") == "0px") {

            var mainWidth = $("#main").width() - 256;

            $(".sidepanel").css("width", `15%`);

            $("#main").css("margin-left", `15%`);

            $("#main").css("width", `85%`);

        } else {

            $(".sidepanel").css("width", "0%");

            $("#main").css("margin-left", "0%");

            $("#main").css("width", "100%");

        }

    });


    //menu item navigation

    $(".menuItem").on("click", function() {


        // if this menuitem is collapsed

        if ($(this).next().css("height") == "0px") {


            // turning off all other menu items except for this

            $(".menuItem").not($(this)).next("div").css("height", "0px");

            $(".menuItem").not($(this)).removeClass("openAnchor");

            $(".menuItem").not($(this)).addClass("collapsedAnchor");


            // turning off all sub menu items except for this

            $(".subMenuItem").next("div").css("height", "0px");

            $(".subMenuItem").removeClass("openAnchor");

            $(".subMenuItem").addClass("collapsedAnchor");



            // substituting collapsed class for open class

            $(this).removeClass("collapsedAnchor");

            $(this).addClass("openAnchor");



            var numberOfChildren = $(this).next("div").find("> a").length;

            var height = 37 * numberOfChildren;

            $(this).next("div").css("height", `${height}px`);


        } else {

            $(this).removeClass("openAnchor");

            $(this).addClass("collapsedAnchor");

            $(this).next("div").css("height", "0px");

        }

    });


    // sub menu item navigation

    $(".subMenuItem").on("click", function() {


        // if this menuitem is collapsed

        if ($(this).next().css("height") == "0px") {


            // accesing sibling open anchor

            var openAnchorChildNumber = $(this).parent().find(".openAnchor").first().next("div").find("> a").length;

            var heightToDeduce = 37 * openAnchorChildNumber;

            console.log(heightToDeduce);

            // turning off all other sub menu items except for this

            $(".subMenuItem").not($(this)).next("div").css("height", "0px");

            $(".subMenuItem").not($(this)).removeClass("openAnchor");

            $(".subMenuItem").not($(this)).addClass("collapsedAnchor");



            // substituting collapsed class for open class

            $(this).removeClass("collapsedAnchor");

            $(this).addClass("openAnchor");



            var numberOfChildren = $(this).next("div").find("> a").length;

            var height = 37 * numberOfChildren;

            $(this).next("div").css("height", `${height}px`);

            var parentHeight = $(this).parent().height() + height - heightToDeduce;

            $(this).parent().css("height", `${parentHeight}px`);



        } else {

            $(this).removeClass("openAnchor");

            $(this).addClass("collapsedAnchor");

            $(this).next("div").css("height", "0px");

            var numberOfChildren = $(this).next("div").find("> a").length;

            var height = 37 * numberOfChildren;

            var parentHeight = $(this).parent().height() - height;

            $(this).parent().css("height", `${parentHeight}px`);

        }

    });


});

body {

  position: relative;

}


/* The sidepanel menu */

.sidepanel {

    height: 100%; /* Specify a height */

    width: 0; /* 0 width - change this with JavaScript */

    position: absolute; /* Stay in place */

    z-index: 1;

    left: 0;

    background-color: #221F20; /* Black*/

    overflow-x: hidden; /* Disable horizontal scroll */

    padding-top: 40px; /* Place content 60px from the top */

    transition: 0.3s;

}


.sidepanel .collapsedAnchor::after {

    font-family: 'Font Awesome 5 Free';

    float: right;

    font-weight: 900;

    content: "\f054";

}

.sidepanel .openAnchor::after {

    font-family: 'Font Awesome 5 Free';

    float: right;

    font-weight: 900;

    content: "\f078";

}


/* The sidepanel links */

.sidepanel a {

    padding: 8px 8px 8px 32px;

    text-decoration: none;

    font-size: 25px;

    color: #B7B6B8;

    display: block;

    transition: 0.3s;

    font-size: 13px;

}


/* When you mouse over the navigation links, change their color */

.sidepanel a:hover {

    color: #FFFFFF;

}


/* Position and style the close button (top right corner) */

.sidepanel .closebtn {

    position: absolute;

    top: 0;

    right: 25px;

    font-size: 36px;

    margin-left: 50px;

}


a.menuItem i.fa{

    font-size: 15px;

}


#main {

    transition: margin-left 0.5s;

    padding: 16px;

}


@media screen and (max-height: 450px) {

    .sidenav {

        padding-top: 15px;

    }

    .sidenav a {

        font-size: 18px;

    }

}


.sidepanel .subMenus {

    padding-left: 3%;

    /* position: fixed; */

    overflow-y: hidden;

    transition: 0.5s;

}


.subMenus a {

    padding: 8px 8px 8px 32px;

    text-decoration: none;

    font-size: 25px;

    color: #818181;

    display: block;

    transition: 0.3s;

    font-size: 13px;

}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="navbar" >


        <a href="#" class="toggleButton"><i class="fa fa-align-left" style="color: #000;"></i></a>

        <p>

        user

        </p>


    </div>

 <div class="sidepanel">

    

    <!-- General panel -->

    <a href="#"><i class="fas fa-file-alt sidepanel-icon"></i>  General</a>


</div>


<div class="container-fluid px-5 mt-2" id="main">


    <div class="row py-4">

        <div class="col-md-6 page-title-div">

            <div class="page-header">

                  <h2>HTML</h2>

            </div>

        </div>

    </div>


    <div class="row card py-4 rounded">



        <div class="col-md-6 page-title-div">

            <div>

                  <p>In HTML, there are two main types of lists:

                    unordered lists (<ul>) - the list items are marked with bullets

                    ordered lists (<ol>) - the list items are marked with numbers or letters

                    The CSS list properties allow you to:

                    

                    Set different list item markers for ordered lists

                    Set different list item markers for unordered lists

                    Set an image as the list item marker

                    Add background colors to lists and list items

                    </p>

            </div>

        </div>



    </div>


</div>


查看完整回答
反對 回復 2023-11-13
?
蝴蝶不菲

TA貢獻1810條經驗 獲得超4個贊

位置應固定。


top 0屬性解決了空間問題。


在導航內部添加了切換開關，以便在打開時對其進行切換，如果您愿意，您只需重新設置導航內部切換的樣式即可。


.sidepanel {

    height: 100%;

    top: 0;

    width: 0;

    position: fixed;

    z-index: 9999;

    left: 0;

    background-color: #221F20;

    overflow-x: hidden;

    padding-top: 40px;

    transition: 0.3s;

}



    <div class="navbar" >


        <a href="#" class="toggleButton"><i class="fa fa-align-left" style="color: #000;"></i></a>

        <p>

        user

        </p>


    </div>

 <div class="sidepanel">

     <a href="#" class="toggleButton"><i class="fa fa-align-left" style="color: #000;"></i></a>

    <!-- General panel -->

    <a href="#"><i class="fas fa-file-alt sidepanel-icon"></i>  General</a>


</div>


<div class="container-fluid px-5 mt-2" id="main">


    <div class="row py-4">

        <div class="col-md-6 page-title-div">

            <div class="page-header">

                  <h2>HTML</h2>

            </div>

        </div>

    </div>


    <div class="row card py-4 rounded">



        <div class="col-md-6 page-title-div">

            <div>

                  <p>In HTML, there are two main types of lists:

                    unordered lists (<ul>) - the list items are marked with bullets

                    ordered lists (<ol>) - the list items are marked with numbers or letters

                    The CSS list properties allow you to:


                    Set different list item markers for ordered lists

                    Set different list item markers for unordered lists

                    Set an image as the list item marker

                    Add background colors to lists and list items

                    </p>

            </div>

        </div>



    </div>


</div>



查看完整回答
反對 回復 2023-11-13
  • 2 回答
  • 0 關注
  • 183 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號