Question

我正在创建一个工作人员页面，其中每行有3名工作人员，每行33％，并且一旦点击了会员，就会在下面显示说明。描述是100％的容器。我的问题是，一旦点击图像，它就会推动接下来的两名工作人员。

工作人员将通过CMS加载，没有任何东西可以硬编码。

JS小提琴：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>

Answer 1

你可以这样做：

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

        $(document).ready(function(){
        $('.description').css('display','none');

        $( ".job-desc" ).click(function() {
          $( ".description" ).toggle();
    });
});

这是一个小提琴：http://jsfiddle.net/iammarcthomas/PkeYV/

希望有所帮助，马克

从CMS加载的动态内容。点击后显示员工职位描述

1 个答案: