有没有办法在手风琴中显示行和列？答案

【问题标题】：Is there a way to display rows and columns within an accordion?有没有办法在手风琴中显示行和列？
【发布时间】：2020-01-14 15:29:41
【问题描述】：

问题：我有一个有时可能很长的记录列表。我想在手风琴的 4 列中显示列表。

注意：为了这个示例，我只尝试显示 2 列。

1) 下面的手风琴（具有适当的样式设置）可以工作，但是因为它水平显示行而很混乱。

<button class="accordion">NUMBER OF RIDES PER JOCKEY</button>

<div class="panel">

    <p><p class="break-word" align="justify"><p style="line-height:18px;"><font face="Lato"><font size="1.5"><font color="#000000"><b>ADAM HYERONIMUS</b> HAS <b>2</b> RIDE(S) TODAY. <b>BRENTON AVDULLA</b> HAS <b>6</b> RIDE(S) TODAY. <b>GLYN SCHOFIELD</b> HAS <b>1</b> RIDE(S) TODAY. <b>JASON COLLETT</b> HAS <b>4</b> RIDE(S) TODAY. <b>KERRIN MCEVOY</b> HAS <b>7</b> RIDE(S) TODAY. <b>NOT DECLARED</b> HAS <b>7</b> RIDE(S) TODAY. <b>TOMMY BERRY</b> HAS <b>9</b> RIDE(S) TODAY. <b>ANDREW ADKINS</b> HAS <b>2</b> RIDE(S) TODAY. <b>BROCK RYAN</b> HAS <b>4</b> RIDE(S) TODAY. <b>HUGH BOWMAN</b> HAS <b>6</b> RIDE(S) TODAY. <b>JAY FORD</b> HAS <b>5</b> RIDE(S) TODAY. <b>LUKE CURRIE</b> HAS <b>5</b> RIDE(S) TODAY. <b>ROBBIE DOLAN</b> HAS <b>5</b> RIDE(S) TODAY.</font></p>

</div>

2) 以下代码（没有按钮 class="accordion"）以我想要的方式显示行和列，但是，当我添加“按钮 class="accordion”时，它不起作用。它只是显示一个不起作用的按钮，然后是 2 列数据。

<button class="accordion">NUMBER OF RIDES PER JOCKEY</button>

<div class="panel">

   <div class="row">

      <!-- Column 1 -->
      <div class="column" style="background-color:#FFFFFF;">
     <p style="line-height:18px;"><font face="Lato"><font size="1.5"><font color="#000000">
         <p><b>ADAM HYERONIMUS</b> HAS <b>2</b> RIDE(S) TODAY.</p>
         <p><b>BRENTON AVDULLA</b> HAS <b>6</b> RIDE(S) TODAY.</p>
         <p><b>GLYN SCHOFIELD</b> HAS <b>1</b> RIDE(S) TODAY.</p>
         <p><b>JASON COLLETT</b> HAS <b>4</b> RIDE(S) TODAY.</p>
         <p><b>KERRIN MCEVOY</b> HAS <b>7</b> RIDE(S) TODAY.</p>
         <p><b>NOT DECLARED</b> HAS <b>7</b> RIDE(S) TODAY.</p>
         <p><b>TOMMY BERRY</b> HAS <b>9</b> RIDE(S) TODAY.</p>
      </div>

      <!-- Column 2 -->
      <div class="column" style="background-color:#FFFFFF;">
     <p style="line-height:18px;"><font face="Lato"><font size="1.5"><font color="#000000">
         <p><b>ANDREW ADKINS</b> HAS <b>2</b> RIDE(S) TODAY.</p>
         <p><b>BROCK RYAN</b> HAS <b>4</b> RIDE(S) TODAY.</p>
         <p><b>HUGH BOWMAN</b> HAS <b>6</b> RIDE(S) TODAY.</p>
         <p><b>JAY FORD</b> HAS <b>5</b> RIDE(S) TODAY.</p>
         <p><b>LUKE CURRIE</b> HAS <b>5</b> RIDE(S) TODAY.</p>
         <p><b>ROBBIE DOLAN</b> HAS <b>5</b> RIDE(S) TODAY.</p>
      </div>

</div>

有没有办法做到这一点？

提前谢谢你。

【问题讨论】：

标签： html css panel css-multicolumn-layout bootstrap-accordion

【解决方案1】：

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .accordion {
        background-color: #388070;
        color: #ffffff;
        cursor: pointer;
        padding: 12px;
        width: 100%;
        border: 2px;
        border-width: 1px;
        border-style: solid;
        border-color: f0f0f0;
        text-align: left;
        outline: none;
        font-size: 14px;
        font-weight: normal;
        transition: 0.4s;
        border-radius: 3px;
    }

    .active, .accordion:hover {
        background-color: #388070; 
    }

    .accordion:after {
        content: '\002B'; /* Unicode character for "plus" sign (+) */
        font-size: 13px;
        color: #f5f5f5;
        float: right;
        margin-left: 5px;
    }

    .active:after {
        content: "\2212"; /* Unicode character for "minus" sign (-) */
    }

    .panel {
        padding: 0 12px;
        display: none;
        font-size: 8pt;
        font-color: #000000;
        font-family:'Lato';
        font-weight: normal;
        line-height:18px
        background-color: #FFFFFF;
        overflow: hidden;
        word-wrap: break-word;
        text-align: justify;
    }

    .column {
        float: left;
        width: 25%;
        font-size: 8pt;
        font-color: #000000;
        font-family:'Lato';
        font-weight: normal;
        line-height:18px;
        background-color: #FFFFFF;
    }

    .row:after {
        content: "";
        display: table;
        clear: both;
    }
    </style>
    </head>
    <body>

    <button class="accordion">TODAY'S SCRATCHINGS (AT A GLANCE)</button>

    <div class="panel">

        <div class="row">

            <div class="column">
                <p><b>&nbsp&nbspADAM HYERONIMUS</b> HAS <b>2</b> RIDE(S) TODAY.</p>
                <p><b>&nbsp&nbspBRENTON AVDULLA</b> HAS <b>6</b> RIDE(S) TODAY.</p>
                <p><b>&nbsp&nbspGLYN SCHOFIELD</b> HAS <b>1</b> RIDE(S) TODAY.</p>
                <p><b>&nbsp&nbspJASON COLLETT</b> HAS <b>4</b> RIDE(S) TODAY.</p>
                <p><b>&nbsp&nbspKERRIN MCEVOY</b> HAS <b>7</b> RIDE(S) TODAY.</p>
                <p><b>&nbsp&nbspNOT DECLARED</b> HAS <b>7</b> RIDE(S) TODAY.</p>
                <p><b>&nbsp&nbspTOMMY BERRY</b> HAS <b>9</b> RIDE(S) TODAY.</p>
            </div>

            <div class="column">
                <p><b>ANDREW ADKINS</b> HAS <b>2</b> RIDE(S) TODAY.</p>
                <p><b>BROCK RYAN</b> HAS <b>4</b> RIDE(S) TODAY.</p>
                <p><b>HUGH BOWMAN</b> HAS <b>6</b> RIDE(S) TODAY.</p>
                <p><b>JAY FORD</b> HAS <b>5</b> RIDE(S) TODAY.</p>
                <p><b>LUKE CURRIE</b> HAS <b>5</b> RIDE(S) TODAY.</p>
                <p><b>ROBBIE DOLAN</b> HAS <b>5</b> RIDE(S) TODAY.</p>
            </div>

            <div class="column"> 
                <p><b>BLAIKE MCDOUGALL</b> HAS <b>2</b> RIDE(S) TODAY.</p>
                <p><b>CHRIS WILLIAMS</b> HAS <b>2</b> RIDE(S) TODAY.</p>
                <p><b>JAKE HULL</b> HAS <b>1</b> RIDE(S) TODAY.</p>
                <p><b>JOSH PARR</b> HAS <b>5</b> RIDE(S) TODAY.</p>
                <p><b>MIKAYLA WEIR (APPRENTICE)</b> HAS <b>2</b> RIDE(S) TODAY.</p>
                <p><b>SAM CLIPPERTON</b> HAS <b>2</b> RIDE(S) TODAY.</p>
            </div>

            <div class="column">
                <p><b>BRAD STEWART</b> HAS <b>1</b> RIDE(S) TODAY.</p>
                <p><b>GLEN BOSS</b> HAS <b>6</b> RIDE(S) TODAY.</p>
                <p><b>JAMES MCDONALD</b> HAS <b>7</b> RIDE(S) TODAY.</p>
                <p><b>KATHY O'HARA</b> HAS <b>5</b> RIDE(S) TODAY.</p>
                <p><b>NASH RAWILLER</b> HAS <b>9</b> RIDE(S) TODAY.</p>
                <p><b>TIM CLARK</b> HAS <b>6</b> RIDE(S) TODAY.</p>
            </div>

        </div>

    </div>

    <script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var panel = this.nextElementSibling;
            if (panel.style.display === "block") {
                panel.style.display = "none";
            } else {
                panel.style.display = "block";
            }
        });
    }
    </script>

    </body>
    </html>

【讨论】：

【解决方案2】：

您的第二个示例存在一些问题。您正在尝试将一堆 p 标签嵌套在另一个 p 标签中。这在 html 中不起作用；请改用 div 标签。此外，您不会关闭那些父 p 标签。假设您使用的是 html 5，则不推荐使用字体标签。改为使用 css 作为字体。从这个开始进行一些改进的标记，然后只应用字体 css。另外，不确定驱动手风琴打开/关闭的 javascript 是什么样的，所以我无法验证它是否可以工作。

<button class="accordion">NUMBER OF RIDES PER JOCKEY</button>

<div class="panel">

   <div class="row">

      <!-- Column 1 -->
      <div  class="column" style="background-color:#FFFFFF;">

         <p><b>ADAM HYERONIMUS</b> HAS <b>2</b> RIDE(S) TODAY.</p>
         <p><b>BRENTON AVDULLA</b> HAS <b>6</b> RIDE(S) TODAY.</p>
         <p><b>GLYN SCHOFIELD</b> HAS <b>1</b> RIDE(S) TODAY.</p>
         <p><b>JASON COLLETT</b> HAS <b>4</b> RIDE(S) TODAY.</p>
         <p><b>KERRIN MCEVOY</b> HAS <b>7</b> RIDE(S) TODAY.</p>
         <p><b>NOT DECLARED</b> HAS <b>7</b> RIDE(S) TODAY.</p>
         <p><b>TOMMY BERRY</b> HAS <b>9</b> RIDE(S) TODAY.</p>
      </div>

      <!-- Column 2 -->
      <div class="column" style="background-color:#FFFFFF;">

         <p><b>ANDREW ADKINS</b> HAS <b>2</b> RIDE(S) TODAY.</p>
         <p><b>BROCK RYAN</b> HAS <b>4</b> RIDE(S) TODAY.</p>
         <p><b>HUGH BOWMAN</b> HAS <b>6</b> RIDE(S) TODAY.</p>
         <p><b>JAY FORD</b> HAS <b>5</b> RIDE(S) TODAY.</p>
         <p><b>LUKE CURRIE</b> HAS <b>5</b> RIDE(S) TODAY.</p>
         <p><b>ROBBIE DOLAN</b> HAS <b>5</b> RIDE(S) TODAY.</p>
      </div>
  </div>
</div>

和css

.column {
  font-family:'Lato';
  font-size: 1.5rem;
}

【讨论】：

感谢您的回复@sthurston 我有一些时间来处理它并让它工作。我可能应该在原始帖子中添加更多信息以及适当的 css。如果您（或其他任何人）对该解决方案感兴趣，请参阅下文。再次感谢！