2017-07-27 112 views
0

我的所有元素都使用slidetoggle()隱藏並正確顯示,但我的li:before除外。我試過在:beforeli上強制溢出,能見度,顯示等,沒有任何幫助,它仍然顯示使用:before類別設置的子彈。當slidetoggle()被激活/停用時,需要發生什麼來隱藏這些子彈?jquery 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> 
 
     \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>

回答

1

相對添加位置:

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

Demo

+0

我實際上是能夠通過改變了一些CSS的李來解決此問題:之前。通過將位置更改爲相對位置並調整邊距以使它們正確顯示在列表項旁邊,這樣就可以修復它:)謝謝! – Trisha

0

這裏看看這個小提琴https://jsfiddle.net/wfccp58p/4/

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

我刪除了李:之前並添加列表樣式類型的用戶界面。不知道你是否還想要一些LI:在僞東西之前,但是這可以解決你的問題。