Question

我在mvc视图中有一个jquery手风琴。它适用于一行，但不会在表中显示foreach行。无法理解为什么它包含在foreach声明中。

@Scripts.Render@if ("~/jquery")
@StylesModel.Render("~/Content/css"Isproject)
<link{ href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script>
    $(function () {
          $("#accordion").accordion({
           <div class="table">
                 <div>collapsible: true  </div>
        });<div>
    });
  </script>


@if (Model.Isproject)
{                   
    <div class="table">
        <div>
        </div>
        <div>
            <table class="name" style="border-spacing: 0 8px; border-collapse: separate;">
                @foreach (var item in Model.project)
                {
                    @:<tr style="background-color:grey;-moz-border-radius: 15px;border-radius: 15px;">           
                        <td class="position">
                            @item["post"]
                        </td>                       
                        <td class="image">
                             <img src="@item["image"]" style="height: 37px; width: 37px"/>
                        </td>
                        <td style="width: 50%;padding-left: 10px;text-align: left;">
                            <div id="accordion">
                                <a href="#">@item["name"]</a>
                                <p>Content in dropdown</p>
                            </div> 
                        </td>
                        <td style="width: 10%; text-align: center">
                            @item["rate"]
                        </td>                              
                    @:</tr>                                               
                 }
            </table>
        </div>
    </div>
}

所以简而言之，我需要jquery为每个条目/行而不仅仅是第一个条目/行。

Answer 1

所以当你执行$("#accordion").accordion时，它将选择带有id accordion的第一个元素并为其注入accordion属性和标记，rest将被忽略。

并且，在您的foreach循环中，您为特定div内的每个td分配相同的ID，即<div id="accordion">，这是错误的。

尝试分配唯一ID或代替id使用类，即<div class="myaccordion">，并在上面的jQuery代码中执行此操作，$(".myaccordion").accordion

以及初始化手风琴的正确语法将是：

 $( ".accordion" ).accordion({
      collapsible: true
    });

而不是你现在拥有的（我会认为这是错字）。在手风琴中进行多个部分的正确方法是：

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p> this is section 1</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>this is section 2</p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>this is section 3</p>
  </div>
</div>

所以基本上，你需要重建你的foreach循环，将主手风琴div保持在外面并仅重复这些部分

foreach项目仅显示一行

1 个答案: