jquery sluttogogle() nicht ausblenden: vor Element

Question

Alle meine Elemente verstecken und zeigen korrekt mit slidetoggle(), außer für meine li:before. Ich habe versucht, den Überlauf, Sichtbarkeit, Display usw. auf dem :before und dem li, und nichts hilft, es zeigt immer noch die Kugeln mit der :before Klasse festgelegt. Was muss passieren, um diese Kugeln zu verstecken, wenn slidetoggle() aktiviert/deaktiviert ist?

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> 
 
     \t <li>Multi Commercial (ATP preferred)</li> 
 
     \t <li>First Class Medical</li> 
 
     \t <li>Passport</li> 
 
     \t <li>90 day currency</li> 
 
     \t <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

Add Position relativ:

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

Demo

Answer 2

sehen Hier an dieser Geige https://jsfiddle.net/wfccp58p/4/

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

ich das li entfernt: vor und hinzugefügt, um die ui den list-style-type. Nicht sicher, ob Sie immer noch einige der LI: Vor Pseudo-Sachen wollten, aber das behebt Ihr Problem.