从CMS加载的动态内容.员工工作描述显示一旦点击

Dynamic content loaded from CMS. Staff job description to show once clicked on

本文关键字：显示 描述 工作 加载 CMS 动态      更新时间：2023-09-26

我正在创建一个工作人员页面，其中一行有3名工作人员，每行33%，一旦单击成员，它会显示下面的描述。描述是100%的集装箱。我的问题是，一旦点击图像，它就会把下两个工作人员推下去。

工作人员将通过CMS加载，没有什么可以硬编码。

JS Fiddle here: http://jsfiddle.net/zangief007/BSN5u/1/

HTML:

      <ul>
        <li><a href="#" class="job-desc"><img src="../images/our-people/staff1.png" alt="staff1" width="191" height="191"></a></li>
        <li>Jon doe</li>
        <li>09 548 5554</li>
        <li>jon@gmail.com</li>
      </ul>
       <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, tempora, libero, ipsa maxime facere ullam harum ad iusto laborum minima magni officia provident aut obcaecati quaerat fugiat labore qui aliquam.</p>
       <ul>
        <li><img src="../images/our-people/staff1.png" alt="staff1" width="191" height="191"></li>
        <li>Jon doe</li>
        <li>09 548 5554</li>
        <li>jon@gmail.com</li>
      </ul>
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, tempora, libero, ipsa maxime facere ullam harum ad iusto laborum minima magni officia provident aut obcaecati quaerat fugiat labore qui aliquam.</p>

         <ul>
        <li><img src="http://placehold.it/150x150" alt="staff1" width="191" height="191"></li>
        <li>Jon doe</li>
        <li>09 548 5554</li>
        <li>jon@gmail.com</li>
      </ul>
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, tempora, libero, ipsa maxime facere ullam harum ad iusto laborum minima magni officia provident aut obcaecati quaerat fugiat labore qui aliquam.</p>
  </div>

JS: 

<script>
      $( ".job-desc" ).click(function() {
          $( ".description" ).fadeToggle( "slow", "linear" );
    });
  </script>

你可以这样做:

加载页面时，添加一些CSS，将.description元素的样式更改为none。然后，当单击。job-desc时，切换可见性。

        $(document).ready(function(){
        $('.description').css('display','none');
        $( ".job-desc" ).click(function() {
          $( ".description" ).toggle();
    });
});

Here's a Fiddle: http://jsfiddle.net/iammarcthomas/PkeYV/

希望有帮助，Marc

相关文章：