Question

无法将手风琴jquery与我的MVC视图集成。当选择@item [“name”]时，我需要它来显示内容。但目前它没有显示。

脚本：

<script>
$(function () {
    $("#parameter_accordion").accordion({ collapsible: true 
    });
});
</script>

表：

<table style="border-spacing: 0 8px; border-collapse: separate;">
                    <tbody>
                        @foreach (var item in Model.project)
                {  

                    @:<tr style="background-color:grey;-moz-border-radius: 15px;border-radius: 15px;">

                    <td class="position">@item["position"]</td>                        
                    <td class="image">
                        <img src="@item["image"]" style="height: 37px; width: 37px"/>
                    </td>
                    <td id="parameter_accordion" style="width: 50%;padding-left: 10px;text-align: left;"><a href="#">@item["name"]</a>


                                <p>Content in dropdown</p>
                                <p>Content in dropdown</p>
                    </td>


                    @*<td class="points">@item["totalPoints"]</td>*@
                    @:</tr>                                  
                        }
                    </tbody>
                </table>

Answer 1

试试这个...

@:<tr id="parameter_accordion" style="background-color:grey;-moz-border-radius: 15px;border-radius: 15px;">

我认为手风琴需要这种结构，我不确定，但你可以试试。

<div id="parameter_accordion">
  <h3>1</h3>
  <div>
    <p>
    </p>
  </div>
  <h3>2</h3>
  <div>
    <p>
    </p>
  </div>
</div>

来自jQuery http://api.jqueryui.com/accordion/

<div id="accordion">
  <h3>First header</h3>
  <div>First content panel</div>
  <h3>Second header</h3>
  <div>Second content panel</div>
</div>

试试这个：

<table style="border-spacing: 0 8px; border-collapse: separate;">
    <tbody>
        <div id="parameter_accordion">
        @foreach (var item in Model.project)
        {
            <h3>@item["name"]</h3>
            <div>
            @:<tr style="background-color:grey;-moz-border-radius: 15px;border-radius: 15px;">

            <td class="position">@item["position"]</td>                        
            <td class="image">
                <img src="@item["image"]" style="height: 37px; width: 37px"/>
            </td>
            <td style="width: 50%;padding-left: 10px;text-align: left;"><a href="#">@item["name"]</a>


                        <p>Content in dropdown</p>
                        <p>Content in dropdown</p>
            </td>


            @*<td class="points">@item["totalPoints"]</td>*@
            @:</tr>
            </div>                                  
        }
        </div>
    </tbody>
</table>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
$("#parameter_accordion").accordion();
});
</script>

将accordion jquery与我的MVC视图集成

1 个答案: