javascript - 显示隐藏 div 不起作用

Question

大家好，我有以下 html 代码

<div id="orderlist">
    <div class="panel" id="1">
        <div class="p_header">Order No: 1
            <input class="ordview" type="button" value="View Details"/>
            <input class="select" type="button" value="Add"/>
        </div>
        <div class="p-content" style="display:none;">
            <table>
                <tr><td>Contact Person:</td><td></td></tr>
                <tr><td>Telephone:</td><td></td></tr>
                <tr><td>E-Mail:</td><td></td></tr>
                <tr><td>Address:</td><td></td></tr>
                <tr><td></td><td></td></tr>
                <tr><td>Code</td><td></td></tr>
                <tr><td>City</td><td></td></tr>
            </table>
        </div>
    </div>
</div>

使用以下 jquery 来切换它，但它不起作用，但无法弄清楚为什么

$("body").on('click',".ordview",function(){
   $(this).closest('div.p-content').css('display','block');
   alert('view button clicked');
});

Answer 1

.closest() 上升到 DOM，并且 p.content 不是祖先，但 div.panel 是。使用:

$("body").on('click', ".ordview", function () {
    $(this).closest('div.panel').find('div.p-content').toggle();
});

<强> jsFiddle example