单击按钮时jquery切换

Question

我的桌子里面有几个项目，每个桌子都有一个按钮，可以显示菜单上特定项目的更多信息。

我的HTML表位于

之下

<table id="menu_breads">
    <thead>
        <tr>
            <th colspan="2">BREADS</th>
        </tr>
        <tr>
            <th>ITEM</th>
            <th>PRICE</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Portugese Rolls
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R1.49</td>
        </tr>
        <tr>
            <td colspan="2" class="more">A hand made selection of Portugese rolls</td>
        </tr>
        <tr>
            <td>Hotdog Buns
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R0.99</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Hotdog buns</td>
            </tr>
        </tr>
        <tr>
            <td>French Loaf
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R3.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of French loaves</td>
            </tr>
        </tr>
        <tr>
            <td>Sead Roll
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R2.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Seed Rolls</td>
            </tr>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">
                 <h6>Prices may change without prior warning</h6>

            </td>
        </tr>
    </tfoot>
</table>
<!-- TABLE FOR CONFECTIONARIES -->
<table id="menu_confect">
    <thead>
        <tr>
            <th colspan="2">CONFECTIONARIES</th>
        </tr>
        <tr>
            <th>ITEM (per slice)</th>
            <th>PRICE</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cream Slice
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R12.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Cream slices</td>
            </tr>
        </tr>
        <tr>
            <td>Chocolate Cake
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R15.99</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Chocolate cakes</td>
            </tr>
        </tr>
        <tr>
            <td>Coconut Eclaire
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R2.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Coconut Eclairs</td>
            </tr>
        </tr>
        <tr>
            <td>Chocolate Eclaire
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R4.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of chocolate Eclairs</td>
            </tr>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">
                 <h6>Prices may change without prior warning</h6>

            </td>
        </tr>
    </tfoot>
</table>

我的CSS就在这里

.myButton {
    background: #183C4C;
    border-radius: 31%;
    border:2px solid #4e6096;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:11px;
    text-decoration:none;
    width: 15%;
    float: right;
}

.more {
    display: none;
    }

Demo

和jquery是我有点理解的问题。我是否需要对要显示的每个td进行ID，还是可以使用类和单击切换事件来进行ID？

我设法让它在点击时显示，问题是显示所有隐藏的行，而不仅仅是单个行。

$(document).ready(function(){

$('.myButton').click(function(){
    $(this).closest('tr').next().find('.more').toggle();

    if ($(this).closest('tr').is(":visible")) {
                $(this).html("&#x2C4")
        }
        else { 
            $(this).html("&#x2C5")
        }
});

}）;

Answer 1

您不必为每个$(".myButton").on("click", function () { var more = $(this).closest("tr").next("tr").find(".more"); more.toggle(); if (more.is(":visible")) { //show minus icon, hide plus } else { //show plus icon, hide minus } }); 提供ID，这些都是矫枉过正的。你想要一些动态的东西假设您的HTML结构保持不变，您可以这样做：

编辑：添加了从评论中切换加号和减号图标的功能

__shfl()

readme （感谢Rory ）

Answer 2

more应该提供给tr - 你的标记也是无效的（你有tr作为tr的孩子 - more tr是孩子的按钮tr）

    <tr>
        <td>Portugese Rolls
            <button class="myButton">&#x2C5</button>
        </td>
        <td>R1.49</td>
    </tr>
    <tr class="more">
        <td colspan="2">A hand made selection of Portugese rolls</td>
    </tr>

然后

$('.myButton').click(function(){
    $(this).closest('tr').next().toggle();
})

演示：Fiddle

如果您不想更改任何内容

$('.myButton').click(function(){
    $(this).closest('tr').next().find('.more').toggle();
})

演示：Fiddle

Answer 3

你试过这个：

$(".myButton").on("click",function() {
   $(this).closest("tr").toggle();
})