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

Question

在我开始之前，您应该知道这里有很多信息。这一个是因为我还不能发布像素，还有两个是为了我们不浪费彼此的时间。非常感谢我在这个帖子上得到的所有帮助

因此，我使用的是无序列表，其中列表元素以内联方式显示在大文本中。该列表本身约占页面的80%。

当您单击列表元素时，应该弹出一个div来替换列表元素，解释列表元素的含义，如果您单击该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");
        });

让我知道你的想法

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事件，可以在最后阶段切换

再次感谢大家为我指明了正确的方向！