使用 jquery 在同一位置显示项目

Question

我很难处理 jquery 和定位隐藏且必须显示的项目。我有 2 个白盒子。左框是客户框（具有不同的名称），右框（具有不同的项目）是项目框，所以我在单击时尝试根据左框中的客户名称在右框上显示他的项目，直到这一刻一切都是工作，但问题是当我单击第二个用户时，属于第二个用户的项目显示在属于名字（用户）的项目下。所以我想在同一条线上显示每个项目。我不想一个接一个地展示。

Here is link to jsfiddle

http://jsfiddle.net/m2w3owkh/1/

谢谢！

Answer 1

我建议重组其工作方式。现在您在同一个 ul 中列出了所有项目，这意味着当您对其他客户隐藏项目时，当前所选客户项目的上方和下方会有间隙。

解决此问题的一种方法是为每组项目创建不同的 ul，然后在单击时显示和隐藏它们。

$(function() {
    $("#show1").click(function(){
        $(".project").hide();
        $(".project_1").toggle();
    });

    $("#show2").click(function(){
        $(".project").hide();
        $(".project_2").toggle();
    });

     $("#show3").click(function(){
         $(".project").hide();
        $(".project_3").toggle();
    });

      $("#show4").click(function(){
        $(".project").hide();
        $(".project_4").toggle();
    });
});

.cprojectClients{ 
 position: relative;
 left: 40px;
 float: left;
 background-color: #ffffff;
 width: 280px;
 height: 400px;
 z-index: 2;
 -webkit-box-shadow: -16px 2px 38px -8px rgba(0,0,0,0.75);
 -moz-box-shadow: -16px 2px 38px -8px rgba(0,0,0,0.75);
 box-shadow: -16px 2px 38px -8px rgba(0,0,0,0.75);
 
}


.cprojectOffers{
 float: right;
 position: relative;
 right: 10px;
 top:10px;
 background-color: #ffffff;
 width: 280px;
 height: 400px;
 z-index: 1;
 -webkit-box-shadow: 16px 2px 38px -8px rgba(0,0,0,0.75);
 -moz-box-shadow: 16px 2px 38px -8px rgba(0,0,0,0.75);
 box-shadow: 16px 2px 38px -8px rgba(0,0,0,0.75);
}

.project {
    display:none;
}

.list h3 {
    cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cprojectClients"> 
 <p>Client Name</p>

 <ul class="list">
  <li> 
   <h3 id="show1">Joe</h3>
  </li>
  <li>
   <h3 id="show2">John</h3>
  </li>
  <li>
   <h3 id="show3">Jason</h3>  
  </li>
  <li>
   <h3 id="show4">Jacob</h3>
  </li>
 </ul>
</div><!--.cproject-clients-->

<div class="cprojectOffers"> 
 <p>Project Name</p>

 <ul class="project project_1">
  <li> 
   <a><p>project_1.pdf</p></a>
  </li>
  <li>
   <a><p>project_9.pdf</p></a> 
  </li>
 </ul>
 <ul class="project project_2">
  <li>
   <a><p>project_2.pdf</p></a> 
  </li>
 </ul>
 <ul class="project project_3">
  <li>
   <a><p>project_3.pdf</p></a> 
  </li>
 </ul>
 <ul class="project project_4">
  <li>
   <a><p>project_4.pdf</p></a> 
  </li>
  <li>
   <a><p>project_5.pdf</p></a> 
  </li>
  <li>
   <a><p>project_6.pdf</p></a> 
  </li>
  <li>
   <a><p>project_7.pdf</p></a> 
  </li>
  <li>
   <a><p>project_8.pdf</p></a> 
  </li>
 </ul>
</div><!--.cproject-offers-->

你可以清理它甚至比这更多，并以一种方式构建它，你可以重复使用相同的 jQuery 函数来为任意数量的 clients/projects 执行此操作，而无需添加新的每次添加新客户端时单击功能，但这应该可以帮助您入门。

Answer 2

使用这个

$("#show1").click(function(){
        $(".project_1").toggle();
     $('.projectList>li>a>p').not('.project_1').hide();
    });

    $("#show2").click(function(){
        $(".project_2").toggle();
        $('.projectList>li>a>p').not('.project_2').hide();
    });

     $("#show3").click(function(){
        $(".project_3").toggle();
         $('.projectList>li>a>p').not('.project_3').hide();
    });

      $("#show4").click(function(){
        $(".project_4").toggle();
          $('.projectList>li>a>p').not('.project_4').hide();
    });

.cprojectClients{ 
 position: relative;
 left: 40px;
 float: left;
 background-color: #ffffff;
 width: 280px;
 height: 400px;
 z-index: 2;
 -webkit-box-shadow: -16px 2px 38px -8px rgba(0,0,0,0.75);
 -moz-box-shadow: -16px 2px 38px -8px rgba(0,0,0,0.75);
 box-shadow: -16px 2px 38px -8px rgba(0,0,0,0.75);
 
}


.cprojectOffers{
 float: right;
 position: relative;
 right: 10px;
 top:10px;
 background-color: #ffffff;
 width: 280px;
 height: 400px;
 z-index: 1;
 -webkit-box-shadow: 16px 2px 38px -8px rgba(0,0,0,0.75);
 -moz-box-shadow: 16px 2px 38px -8px rgba(0,0,0,0.75);
 box-shadow: 16px 2px 38px -8px rgba(0,0,0,0.75);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="cprojectClients"> 
     <p>Client Name</p>
     
    <ul class="list">
      <li> 
       <h3 id="show1">Joe</h3>
        </li>

     <li>
         <h3 id="show2">John</h3>
     </li>
     <li>
      <h3 id="show3">Jason</h3>  
     </li>
     <li>
         <a href="javascript:;"><h3 id="show4">Jacob</h3></a>
     </li>
    </ul>

    </div><!--.cproject-clients--> 



    <div class="cprojectOffers"> 
     <p>Project Name</p>

     <ul class="projectList">
       <li> 
        <a href="javascript:;"><p style="display:none;" class="project_1">project_1.pdf</p></a>
         </li>
         <li>
          <a href="javascript:;"><p style="display:none;" class="project_1">project_9.pdf</p></a> 
         </li>
      <li>
         <a href="javascript:;"><p style="display:none;" class="project_2">project_2.pdf</p></a> 
      </li>
      <li>
       <a href="javascript:;"><p style="display:none;" class="project_3">project_3.pdf</p></a> 
      </li>
      <li>
          <a href="javascript:;"><p style="display:none;" class="project_4">project_4.pdf</p></a> 
      </li>
      <li>
          <a href="javascript:;"><p style="display:none;" class="project_4">project_5.pdf</p></a> 
      </li>
      <li>
          <a href="javascript:;"><p style="display:none;" class="project_4">project_6.pdf</p></a> 
      </li>
      <li>
          <a href="javascript:;"><p style="display:none;" class="project_4">project_7.pdf</p></a> 
      </li>
      <li>
          <a href="javascript:;"><p style="display:none;" class="project_4">project_8.pdf</p></a> 
      </li>


     </ul>
    </div><!--.cproject-offers-->

使用 jquery 在同一位置显示项目

Showing project on the same place using jquery

html

javascript

css

jquery

position