单击按钮显示/隐藏不同的Div

Question

我是jQuery的新手，我正在努力让桌面行崩溃和扩展。行位于不同的行下，旁边有按钮。有人可以帮我指定哪一行必须崩溃onclick。这是我的代码。

的jQuery

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!-- TextViews and stuff -->

        <View
            android:id="@+id/SMVFDividerBar"
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:layout_below="@+id/LL2"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="7dp"
            android:layout_marginRight="7dp"
            android:background="@color/colorPrimaryDark">

    </RelativeLayout>

</FrameLayout>

HTML第一行

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#btnAdd").click(function () {
            $('.td1').toggle();
        });
    });
</script>

HTML第二行

@foreach (var item in Model1)
{
    <tr>
        <td>
            @*<a href="javascript:hideElem(@item.OrderNumber)" onclick="hideElem(@item.OrderNumber)">HClick here</a>*@
            @*<a href="" id="btnAdd" name="btnAdd">SClick here</a>*@
            <button id="btnAdd" name="btnAdd">ADD</button>
        </td>

        <td>
            @Html.DisplayFor(modelItem => item.OrderNumber)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.TransactionDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Company)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Lines)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.OrderedTotal)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ProcessedTotal)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Status)
        </td>
        <td></td>
    </tr>
}

Answer 1

我知道了 jQuery代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>

$(function () {
    $("td[colspan=3]").find("p").hide();
    $("table").click(function (event) {

        event.stopPropagation();
        var $target = $(event.target);
        $target.closest("tr").nextUntil(".parent").find("p").slideToggle();
    });
});

然后我的HTML代码

  <table class="table table-bordered noSpace" border="0" cellspacing="0" cellpadding="0">

    <tr>
        <th>

        </th>
        <th>
            Order Name
        </th>
        <th>
            Transaction Date
        </th>
        <th>
            Company
        </th>
        <th>
            Lines
        </th>
        <th>
            Ordered Total
        </th>
        <th>
            Processed Total
        </th>
        <th>
            Status
        </th>

        <th>
            Info
        </th>
    </tr>
    @foreach (var item in Model1)
    {

        <tr class="parent">

            <td>

                <span>Click</span>

            </td>

            <td>
                @Html.DisplayFor(modelItem => item.OrderNumber)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.TransactionDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Company)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Lines)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.OrderedTotal)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ProcessedTotal)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Status)
            </td>
            <td></td>
        </tr>
        foreach (var item2 in Model2)
        {

            if (item2.Order == item.OrderNumber)
            {
                <tr class="NewRows">
                    <td style="width:20px"></td>
                    <td>
                            <p>@Html.DisplayFor(modelItem => item2.PickNo)</p>
                    </td>
                    <td colspan="4">
                            <p style="float:left">
                                Ended:

                                @Html.DisplayFor(modelItem => item2.PickEndDate)
                                @Html.DisplayFor(modelItem => item2.PickEndTime)
                            </p>
                    </td>
                    <td></td>
                    <td>
                            <p><img src="~/Icons/WAGIconPDF.PNG" width="20" height="20" /> @Html.DisplayFor(modelItem => item2.InvNo)</p>
                    </td>
                    <td>
                            <p><img src="~/Icons/WAGIconWarehouse1.PNG" width="20" height="20" />@Html.DisplayFor(modelItem => item2.WarehouseCode)</p>
                    </td>

                </tr>
            }

        }
    }

</table>