Question

在下面的HTML中，每个都有一个span（class =“flip”）和div（class =“panel”）。我想编写一个Jquery脚本，当单击一个特定的“Click Here”时，该特定元素的子元素会显示，再次单击它时会隐藏它。

<tbody>
<tr class="even">
    <td>
        <a href="something">
            1
        </a>
        <span class="flip"> Click Here
            <div class="panel" style="display: none;">Hello world!</div>
        </span>
    </td>
</tr>        
<tr class="odd">
    <td>
        <a href="something">
            2
        </a>
        <span class="flip"> Click Here
            <div class="panel" style="display: none;">Hello world!</div>
        </span>
    </td>
</tr>
<tr class="even">
    <td>
        <a href="something">
            a
        </a>
        <span class="flip"> Click Here
            <div class="panel" style="display: none;">Hello world!</div>
        </span>
    </td>    
</tr>
<tr class="odd">
    <td>
        <a href="something">
            Glen Test
        </a>
        <span class="flip"> Click Here
            <div class="panel" style="display: none;">Hello world!</div>
        </span>
    </td>
</tr>

Answer 1

＆＃13;

$(document).ready(function() {
    $('.flip').on('click', function() {
        $(this).find('.panel').toggle();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr class="even">
        <td>
            <a href="something">
                1
            </a>
            <span class="flip"> Click Here
                <div class="panel" style="display: none;">Hello world!</div>
            </span>
        </td>
    </tr>        
    <tr class="odd">
        <td>
            <a href="something">
                2
            </a>
            <span class="flip"> Click Here
                <div class="panel" style="display: none;">Hello world!</div>
            </span>
        </td>
    </tr>
    <tr class="even">
        <td>
            <a href="something">
                a
            </a>
            <span class="flip"> Click Here
                <div class="panel" style="display: none;">Hello world!</div>
            </span>
        </td>    
    </tr>
    <tr class="odd">
        <td>
            <a href="something">
                Glen Test
            </a>
            <span class="flip"> Click Here
                <div class="panel" style="display: none;">Hello world!</div>
            </span>
        </td>
    </tr>
</table>

＆＃13;

Jquery选择器具有多个类和相同的类名

1 个答案: