2017-07-27 78 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:在伪东西之前,但是这可以解决你的问题。