Question

在开始之前，你应该知道这里有很多信息。这个因为我还不能发布pix，而且我们不会浪费彼此的时间。我非常感谢您在这篇文章中收到的所有帮助！

所以我正在处理一个无序列表，其中列表元素在大文本中显示为内联。该列表本身占据了该页面的大约80％。

单击列表元素时，会弹出一个div来替换list元素，解释列表元素的含义，如果单击div，则div消失，列表元素重新出现。

我遇到的问题是我希望div元素在无序列表中准确地替换列表元素的位置（边距和所有内容）。相反，正在发生的事情是div每次出现在左侧，无序列表元素在右侧重新排列。

这是html：

    <div id="bottom">
    <h1 class="issue_line">So what's the issue in Niagara Falls?</h1>
    <ul class="issue_headings">
    <li class="issue1">Education</li>
 <div class="quarter-box1">
  <p>The members of NOAH recognize that <strong>quality education</strong> is      
      necessary for any community to thrive...<br/>
  <a href="issues_taskforces.html">Read more.</a></p>
 </div>

    <li class="issue2">Local Hiring</li>
 <div class="quarter-box2">
  <p>The need for jobs in Niagara County is overwhelming, and NOAH is working to 
      create more local jobs through the policy level...<br/>
  <a href="issues_taskforces.html">Read more.</a></p>
 </div>

    <li class="issue3">Economic Development</li>
 <div class="quarter-box3">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et   
      facilisis risus. Quisque a gravida urna. Ut leo ligula...<br/>
 <a href="issues_taskforces.html">Read more.</a></p>
 </div>

    <li class="issue4">Trasnportation</li>
 <div class="quarter-box4">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et 
     facilisis risus. Quisque a gravida urna. Ut leo ligula...<br/>
 <a href="issues_taskforces.html">Read more.</a></p>
</div>

    </ul>
    </div>

这是CSS

     #bottom {
      position: relative;
      width: 100%;
      margin: 0 auto; 
      clear: both;
      padding-top: 5px;
      padding-bottom: 5px;
     }

     ul.issue_headings {
      width: 1498px;
      float: left;
      margin-top: 50px;
      margin-bottom: 50px;
      padding: 0;
      list-style-type: none;
      display: none;
      text-align: center;
     }

     ul.issue_headings li {
      display: inline;
      margin-left: 2%;
      padding: 0;
      font-size: 3em;
      color: #9ac0e2;
     }

     ul.issue_headings li:hover {
      color: #FF9933;
     }

     .quarter-box1 { 
      float: left;
      margin-left: 50px;
      background-color: rgba(255, 255, 255, .9);
      border: 3px solid #0c69bf;
      box-shadow: 5px 5px 20px black;
      width: 280px;
      height: 150px;
      overflow: hidden;
      display: none;
     }

     .quarter-box2 { 
      float: left;
      margin-left: 100px;
      background-color: rgba(255, 255, 255, .9);
      border: 3px solid #0c69bf;
      box-shadow: 5px 5px 20px black;
      width: 280px;
      height: 150px;
      overflow: hidden;
      display: none;
     }

     .quarter-box3 {
      float: left;
      margin-left: 150px;
      background-color: rgba(255, 255, 255, .9);
      border: 3px solid #0c69bf;
      box-shadow: 5px 5px 20px black;
      width: 280px;
      height: 150px;
      overflow: hidden;
      display: none;
     } 

     .quarter-box4 {
      float: left;
      margin-left: 200px;
      background-color: rgba(255, 255, 255, .9);
      border: 3px solid #0c69bf;
      box-shadow: 5px 5px 20px black;
      width: 280px;
      height: 150px;
      overflow: hidden;
      display: none;
     }

     .quarter-box1:hover, .quarter-box2:hover,.quarter-box3:hover, .quarter-box4:hover { 
      border: 3px solid #FF9933;
     }

这是jQuery

        $('h1.issue_line').click(function(){
          $('h1.issue_line').hide("slow");
          $('ul.issue_headings').show("slow");
          $('div.quarter-box1,div.quarter-box2,div.quarter-box3,div.quarter-                 
     box4').hide("slow");
        });
        $('ul.issue_headings li.issue1').click(function(){
          $('ul.issue_headings li.issue1,div.quarter-box2,div.quarter-box3,div.quarter-

     box4').hide("slow");
          $('div.quarter-box1,ul.issue_headings li.issue2,ul.issue_headings 
     li.issue3,ul.issue_headings li.issue4').show("slow");
        });
        $('ul.issue_headings li.issue2').click(function(){
          $('ul.issue_headings li.issue2,div.quarter-box1,div.quarter-box3,div.quarter-
     box4').hide("slow");
          $('div.quarter-box2,ul.issue_headings li.issue1,ul.issue_headings 
     li.issue3,ul.issue_headings li.issue4').show("slow");
        });
        $('ul.issue_headings li.issue3').click(function(){
        $('ul.issue_headings li.issue3,div.quarter-box1,div.quarter-box2,div.quarter-          
     box4').hide("slow");
          $('div.quarter-box3,ul.issue_headings li.issue1,ul.issue_headings          
     li.issue2,ul.issue_headings li.issue4').show("slow");
        });
        $('ul.issue_headings li.issue4').click(function(){
          $('ul.issue_headings li.issue4,div.quarter-box1,div.quarter-box2,div.quarter-
     box3').hide("slow");
          $('div.quarter-box4,ul.issue_headings li.issue1,ul.issue_headings          
     li.issue2,ul.issue_headings li.issue3').show("slow");
        });
        $('div.quarter-box1').click(function(){
          $('div.quarter-box1').hide("slow");
          $('ul.issue_headings li.issue1').show("slow");
        });
      $('div.quarter-box2').click(function(){
          $('div.quarter-box2').hide("slow");
          $('ul.issue_headings li.issue2').show("slow");
        });
      $('div.quarter-box3').click(function(){
          $('div.quarter-box3').hide("slow");
          $('ul.issue_headings li.issue3').show("slow");
        });
      $('div.quarter-box4').click(function(){
          $('div.quarter-box4').hide("slow");
          $('ul.issue_headings li.issue4').show("slow");
        });

Lemme知道你的想法！

Answer 1

...基于@nnnnnn和@aug的一些建议，我能够弄清楚这一点。通过确保HTML代码有效，可以修复ul + div组合（简单的错误，我完全错过了它！）。另外，我在div之外添加了一个单独的h4，但仍然在list元素中。

<div id="bottom">
<h1 class="issue_line">So what's the issue in Niagara Falls?</h1>
<ul class="issue_headings">
<li class="issue1">
    <h4>Education</h4>
    <div class="quarter-box1">
     <p>The members of NOAH recognize that <strong>quality education</strong> is necessary for any community to thrive...<br/>
     <a href="issues_taskforces.html">Read more.</a></p>
    </div>
</li>   
<li class="issue2">
    <h4>Local Hiring</h4>
    <div class="quarter-box2">
     <p>The <strong>need for jobs</strong> in Niagara County is overwhelming, and NOAH is working to create more local jobs through the policy level...<br/>
     <a href="issues_taskforces.html">Read more.</a></p>
    </div>
</li>
<li class="issue3">
    <h4>Economic Development</h4>
    <div class="quarter-box3">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et facilisis risus. Quisque a gravida urna. Ut leo ligula...<br/>
     <a href="issues_taskforces.html">Read more.</a></p>
    </div>
</li>   
<li class="issue4">
    <h4 style="margin-left:20px;">Transportation</h4>
    <div class="quarter-box4">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et facilisis risus. Quisque a gravida urna. Ut leo ligula...<br/>
     <a href="issues_taskforces.html">Read more.</a></p>
    </div>
</li>   
</ul>
</div>

...然后在JQ中要求进行一些编辑：

$('h1.issue_line').click(function(){
     $('h1.issue_line').hide("slow");
     $('li.issue1 h4,li.issue2 h4,li.issue3 h4,li.issue4 h4').show("slow");
     $('div.quarter-box1,div.quarter-box2,div.quarter-box3,div.quarter-box4').hide("slow");
   });
   $('li.issue1 h4').click(function(){
     $('li.issue1 h4,div.quarter-box2,div.quarter-box3,div.quarter-box4').hide("slow");
     $('div.quarter-box1,li.issue2 h4,li.issue3 h4,li.issue4 h4').show("slow");
   });
   $('li.issue2 h4').click(function(){
     $('li.issue2 h4,div.quarter-box1,div.quarter-box3,div.quarter-box4').hide("slow");
     $('div.quarter-box2,li.issue1 h4,li.issue3 h4,li.issue4 h4').show("slow");
   });
   $('li.issue3 h4').click(function(){
     $('li.issue3 h4,div.quarter-box1,div.quarter-box2,div.quarter-box4').hide("slow");
     $('div.quarter-box3,li.issue1 h4,li.issue2 h4,li.issue4 h4').show("slow");
   });
   $('li.issue4 h4').click(function(){
     $('li.issue4 h4,div.quarter-box1,div.quarter-box2,div.quarter-box3').hide("slow");
     $('div.quarter-box4,li.issue1 h4,li.issue2 h4,li.issue3 h4').show("slow");
   });
   $('div.quarter-box1').click(function(){
     $('div.quarter-box1').hide("slow");
     $('li.issue1 h4').show("slow");
   });
 $('div.quarter-box2').click(function(){
     $('div.quarter-box2').hide("slow");
     $('li.issue2 h4').show("slow");
   });
 $('div.quarter-box3').click(function(){
     $('div.quarter-box3').hide("slow");
     $('li.issue3 h4').show("slow");
   });
 $('div.quarter-box4').click(function(){
     $('div.quarter-box4').hide("slow");
     $('li.issue4 h4').show("slow");
   });

...最后，在CSS中进行一些调整以对齐列表：

#bottom {
 position: relative;
 width: 100%;
 margin: 0 auto; 
 clear: both;
 padding-top: 5px;
 padding-bottom: 5px;
}

ul.issue_headings {
 width: 1498px;
 float: left;
 margin-top: 20px;
 margin-bottom: 20px;
 padding: 0;
 list-style-type: none;
 text-align: center;
}

ul.issue_headings li h4 {
 display: inline;
 margin-top: 20px;
 margin-left: 0;
 padding: 0;
 font-size: 3em;
 color: #9ac0e2;
 display:none;
 width: 350px;
 cursor: pointer;
}

ul.issue_headings li h4:hover {
 color: #FF9933;
}

.quarter-box1, .quarter-box2, .quarter-box3, .quarter-box4 { 
 float: left;
 margin: 0 auto;
 background-color: rgba(255, 255, 255, .9);
 border: 3px solid #0c69bf;
 box-shadow: 5px 5px 20px black;
 width: 280px;
 height: 200px;
 overflow: hidden;
 display: none;
}

总之，我现在有一个可以在最后阶段切换的3弦JQ事件。

再次感谢大家帮助我指明正确的方向！

如何在无序列表中隐藏/显示div容器，以便替换内联列表元素

1 个答案: