javascript - jquery slidetoggle() 不隐藏 :before element

Question

我的所有元素都使用 slidetoggle() 正确隐藏和显示，除了我的 li:before。我已经尝试在 :before 和 li 上强制溢出、可见性、显示等，但没有任何帮助，它仍然显示使用 :before 类。当 slidetoggle() 被激活/停用时，需要做什么来隐藏这些元素符号？

jQuery(document).ready(function($) {
        $("#read-more").click(function(){
            $(".careers-position").slideToggle(800);
    return false;
        });
    });

ul {
        line-height: 2.4em !important;
        margin-left: 20px;
        padding: 0 0 23px 1em;
        }
        li {
        list-style: none !important;
        color: #656565;
    }
    li:before {
        content: "";
        background: #9e9e9e;
        width: 6px;
        height: 6px;
        display: block;
        position: absolute;
        left: 18px;
        margin-top: 16px;
        border-radius: 20px;
        overflow: hidden;
        backface-visibility: hidden;
    }
   .careers-position {
     display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="careers-position">
    <h3>Pilot</h3>
    Position information will go here.
    We are an equal opportunity employer and all qualified applicants will receive consideration for employment. 
    <strong>Requirements:</strong>
    <ul>
     	<li>Multi Commercial (ATP preferred)</li>
     	<li>First Class Medical</li>
     	<li>Passport</li>
     	<li>90 day currency</li>
     	<li>Clean FAA record</li>
    </ul>
</div>
<div class="careers-read-more">
     <a class="quick-btn" id="read-more" href="#">Read More</a>
</div>

Answer 1

添加相对位置:

.careers-position {
  display: none;
  position: relative;
}

Demo