Question

我已经阅读了所有相似的例子，仍然无法获得正确的解决方案。

基本上我有一个简单的侧面菜单，可以在按钮点击时切换。在菜单中有一个复选框列表（它们的位置是绝对的）。父容器似乎相对定位。请帮我找到解决方案，以便＆＃34;溢出：隐藏＆＃34;会说的。

我试图简化下面的代码。整个应用程序的工作示例发布在此处（更容易看到问题）：https://arturtakoev.github.io/redux-reader/

还有一个问题：我注意到当页面上有内容时动画明显变慢。这仅出现在已部署的版本上，并在本地版本上正常工作。你知道为什么吗？

JS（jsx）：

const SideMenu = ({ onClick, selectedSources, onSelectAll, onUnselectAll, showMenu }) => {



    const listOfSources = Object.keys(selectedSources).map(key => key)
    function renderSources() {
        return listOfSources.map((source) => (
            <li>
                <a onClick={(e) => onClick(e, [source])}>{source}</a>
            </li>
        ))
    }

    function renderSourcesChecks() {
        return listOfSources.map((source) => (
            <div className="relative">
            <li>
                <label className="containerOne" style={selectedSources[source].isSelected ? { color: sourceActiveColor } : { color: sourceNotActiveColot }}>{selectedSources[source].properties.title}
                    <input type="checkbox" onChange={(e) => onClick(e, [source])} checked={selectedSources[source].isSelected} />
                    <span className="checkmark"></span>
                </label>
            </li>
            </div>
        ))
    }
    return (
        <div>
        <nav id="sidebar" className={showMenu.isVisible ? 'visible' : 'hidden'}>
        <ul className="list-unstyled components">
            <div>
                <h3>
                    <a onClick={(e) => onSelectAll(e, listOfSources)}>
                        <img id="icon" src={require('../assets/newsIcon.png')} className="d-inline-block align-top" />
                        All in one
                    </a>
                    <a onClick={(e) => onUnselectAll(e, listOfSources)} id="closeicon" className="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </a>
                </h3>

            </div>
            {renderSourcesChecks()}
        </ul>
        </nav>        
        </div>
    )
};

CSS：

#sidebar {
    height: 100vh;
    width: 0;
    position: fixed;
    top: 0;
    left: 0;
    transition: 0.5s;
    overflow-x: hidden;
    background-color: #fff;
    /* top layer */
    z-index: 9999;
    border-right: 1px solid rgba(0,0,0,.125);
}
#sidebar.visible {
    width: 250px;
}
#sidebar ul.components {
    padding: 20px 8px 8px 15px;

    cursor: pointer;
}
#sidebar ul li {
    padding: 5px;
    font-size: 15px;
    transition: 0.3s;
}

/* The container */
.containerOne {
    display: block;
    position: relative;

    padding-left: 30px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 1px solid;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.containerOne input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.containerOne .checkmark:after {
    left: 7px;
    top: 1px;
    width: 5px;
    height: 13px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

Answer 1

我没有准确地提出您的问题，但是如果您希望列表在折叠时不会中断，只需提供＆＃34; #sidebar ul.components＆＃34;固定宽度，如250px;所以文字不会破裂。如果您需要别的东西，请告诉我。

溢出：隐藏绝对定位元素

1 个答案: