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

Answer 2

这里看看这个小提琴https://jsfiddle.net/wfccp58p/4/

ul { line-height: 2.4em; margin-left: 20px;padding: 0 0 23px 1em;list-style-type: none;}

我删除了li：之前并将list-style-type添加到ui。不确定你是否还想要一些LI：在伪装之前，但这可以解决你的问题。

jquery slidetoggle（）没有隐藏：在元素之前

2 个答案: