为了账号安全,请及时绑定邮箱和手机立即绑定

使父级 div 高度与子级相同

使父级 div 高度与子级相同

UYOU 2022-07-08 09:55:21
我有一个容器 div,里面有另外两个 div。一个是出现在左侧的“Home”,另一个是出现在右侧的“Away”。他们肩并肩。在这些 div 内部是其他 div,并且有 Javascript,因此当按下一个元素时,它会使用 CSS 显示显示/隐藏其他 div。但是,当我隐藏/取消隐藏这些时,父高度不会调整,因此一旦打开多个 div,就看不到显示的 div。下面的例子:$("document").ready(function () {    setupInjuries();});function setupInjuries() {    $(".match-injury").each(function () {        var helpIcon = $(this).find(".match-injury-icon");        var shortDescription = $(this).find(".match-injury-shortdescription");        var latestButton = $(this).find(".match-injury-latestbutton");        var longDescription = $(this).find(".match-injury-longdescription");        helpIcon.click(function () {            if (shortDescription.css("display") == "none") {                shortDescription.css("display", "block");            }            else {                shortDescription.css("display", "none");                longDescription.css("display", "none");                latestButton.text("SEE LATEST");            }        });        latestButton.click(function () {            if (longDescription.css("display") == "none") {                longDescription.css("display", "block");                $(this).text("HIDE LATEST");            }            else {                longDescription.css("display", "none");                $(this).text("SEE LATEST");            }        });    });}
查看完整描述

1 回答

?
繁花不似锦

TA贡献1851条经验 获得超4个赞

这是因为您已将高度分配给父容器match-injuries-container。我已经删除了该height属性并添加了min-height属性,并且它对我来说工作正常。如果不需要,您甚至可以完全删除此属性。


$("document").ready(function () {

    setupInjuries();

});


function setupInjuries() {

    $(".match-injury").each(function () {


        var helpIcon = $(this).find(".match-injury-icon");

        var shortDescription = $(this).find(".match-injury-shortdescription");

        var latestButton = $(this).find(".match-injury-latestbutton");

        var longDescription = $(this).find(".match-injury-longdescription");


        helpIcon.click(function () {


            if (shortDescription.css("display") == "none") {

                shortDescription.css("display", "block");

            }

            else {

                shortDescription.css("display", "none");

                longDescription.css("display", "none");

                latestButton.text("SEE LATEST");

            }


        });


        latestButton.click(function () {


            if (longDescription.css("display") == "none") {

                longDescription.css("display", "block");

                $(this).text("HIDE LATEST");

            }

            else {

                longDescription.css("display", "none");

                $(this).text("SEE LATEST");

            }


        });


    });

}

.match-injuries-container {

    width: 100%;

    /* You can have min-height but not height */

    min-height: 135px; 

    background-color: #e5e5e5;

    overflow: hidden;

}


.match-injuries-home {

    width: 50%;

    float: left;

    text-align: center;

    display: inline-block;

    border-left: 1px solid #9c9c9c;

    background-color: #e5e5e5;

}


.match-injuries-away {

    width: 50%;

    float: right;

    text-align: center;

    display: inline-block;

    border-right: 1px solid #9c9c9c;

    background-color: #e5e5e5;

}


.match-injury {

    width: 100%;

    height: auto;

    background-color: #d3d3d3;

    font-size: 13px;

    font-weight: bold;

    border-bottom: 1px solid #9c9c9c;

    border: 1px solid #9c9c9c;

    border-left: none;

    cursor: default;

    position: relative;

}


.match-injury-detail {

    height: 25px;

    padding: 3px 3px 3px 3px;

}


.match-injury-player {

    color: #5b5b5b;

}


.match-injury-status {

    margin-left: 5px;

    color: #d20000;

}


.match-injury-icon {

    position: absolute;

    right: 5px;

    top: 0;

    font-size: 15px;

    color: #2b3180;

    cursor: pointer;

}


.match-injury-descriptions {

    padding: 3px 3px 3px 3px;

}


.match-injury-shortdescription {

    font-size: 10px;

    background-color: #f0f0f0;

    height: auto;

    padding: 3px 3px 3px 3px;

    font-weight: normal;

    display: none;

}


.match-injury-longdescription {

    font-size: 10px;

    background-color: #f0f0f0;

    height: auto;

    padding: 3px 3px 3px 3px;

    font-weight: normal;

    font-style: italic;

    display: none;

}


.match-injury-latestbutton {

    background-image: linear-gradient(#e5e5e5,#ffffff,#e5e5e5);

    width: 100%;

    height: 18px;

    text-align: center;

    border: 1px solid #bbbbbb;

    font-size: 10px;

    font-weight: bold;

    cursor: pointer;

    padding-top: 2px;

}


.match-injury-border {

    width: 100%;

    height: 4px;

    background-image: linear-gradient(#9a9a9a, white, #9a9a9a);

}

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

<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<div class="match-injuries-container">


    <div class="main-header-bar">Injuries</div>


    <div class="match-injuries-home">

        <div class="match-injury">

            <span class="match-injury-player">Player Name 1</span>

            <span class="match-injury-status">OUT</span>

            <div class="match-injury-icon"><i class="fa fa-info-circle"></i></div>

            <div class="match-injury-shortdescription">

                Quadricepts - Expected to be out until atleast July 1st

                <div class="match-injury-latestbutton">SEE LATEST</div>

            </div>

            <div class="match-injury-longdescription">Cousins is unlikely to return this post season, but he wont require surgery on the torn left quadriceps muscle sustained during the firsty quarter of game 2 again the Clipper's on Monday.</div>

        </div>


        <div class="match-injury-border"></div>


        <div class="match-injury">

            <span class="match-injury-player">Player Name 2</span>

            <span class="match-injury-status">OUT</span>

            <span class="match-injury-icon"><i class="fa fa-info-circle"></i></span>

            <div class="match-injury-shortdescription">

                Quadricepts - Expected to be out until atleast July 1st

                <div class="match-injury-latestbutton">SEE LATEST</div>

            </div>

            <div class="match-injury-longdescription">Cousins is unlikely to return this post season, but he wont require surgery on the torn left quadriceps muscle sustained during the firsty quarter of game 2 again the Clipper's on Monday.</div>

        </div>


        <div class="match-injury-border"></div>


        <div class="match-injury">

            <span class="match-injury-player">Player Name 3</span>

            <span class="match-injury-status">OUT</span>

            <span class="match-injury-icon"><i class="fa fa-info-circle"></i></span>

            <div class="match-injury-shortdescription">

                Quadricepts - Expected to be out until atleast July 1st

                <div class="match-injury-latestbutton">SEE LATEST</div>

            </div>

            <div class="match-injury-longdescription">Cousins is unlikely to return this post season, but he wont require surgery on the torn left quadriceps muscle sustained during the firsty quarter of game 2 again the Clipper's on Monday.</div>

        </div>

    </div>


    <div class="match-injuries-away">

        <span style="font-size:13px;">No reported injuries</span>

    </div>

</div>


查看完整回答
反对 回复 2022-07-08
  • 1 回答
  • 0 关注
  • 266 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信