Question

我正在创建一个动态表，我在第一个/左列中有2个复选框，下一个td是程序名和日期，php循环遍历所有可用程序。

当用户点击一行时，更多信息会通过jQuery插件下载。

现在，当您单击复选框时，下拉列表已激活，这不是我需要它做的。

如果单击复选框，如何停止下拉行？

这全部来自jExpand插件：jExpand

脚本：

<script type="text/javascript">
  $(document).ready(function(){
     $("#report tr:odd").addClass("odd");
     $("#report tr:not(.odd)").hide();
     $("#report tr:first-child").show();

     $("#report tr.odd").click(function(){
         $(this).next("tr").toggle();
         $(this).find(".arrow").toggleClass("up");
     });
     //$("#report").jExpand();
 });
 </script>

文件中的脚本：

(function($){
$.fn.jExpand = function(){
    var element = this;

    $(element).find("tr:odd").addClass("odd");
    $(element).find("tr:not(.odd)").hide();
    $(element).find("tr:first-child").show();

    $(element).find("tr.odd").click(function() {
        $(this).next("tr").toggle();
    });

}    
});

HTML：

<table id="report">
    <tr>
        <th>Master/Registration</th>
        <th></th>
        <th>Program Name</th>
        <th></th>
        <th>Date</th>
        <th></th>
    </tr>
    <?php do { ?>
    <tr>
        <td><input name="pid[]" type="checkbox" class="eventCodeCheck" value="<?php echo $row_programs['{table-column}']; ?>" />
            <input name="pid[]" type="checkbox" class="eventCodeCheck" value="<?php echo $row_programs['{table-column}']; ?>" />
        </td>
        <td></td>
        <td><?php echo $row_programs['{table-column}']; ?></td>
        <td></td>
        <td><?php echo $row_programs['format_date']; ?></td>
        <td><div class="arrow"></div></td>
    </tr>
    <tr>
        <td colspan="5">
            <h4>Additional information</h4>
            <ul>
                <li>Info</li>
                <li>Info</li>
                <li>Info</li>
             </ul>   
        </td>
    </tr>

    <?php } while ($query = mysql_fetch_assoc($xxxxxxx)); ?>
    </table>

Answer 1

单击复选框时，您需要stop the propagation事件：

$('input.eventCodeCheck').click(function(e) {
    e.stopPropagation();
});

Answer 2

$("#report tr.odd").click(function(e){
     if( e.target.type.toLowerCase() == 'checkbox') { 
     }
     else{  
       $(this).next("tr").toggle();
       $(this).find(".arrow").toggleClass("up");
     }
});

防止复选框单击激活下拉列表

2 个答案: