.toggleclass和.slidetoggle不起作用

首先，我已阅读有关此问题的所有主题，但无法找到解决方案。基本上我试图在我的MVC项目中应用一个简单的嵌套gridview。除了展开/折叠功能外，它一切正常。我用这个脚本实现它：.toggleclass和.slidetoggle不起作用

$(document).ready(function() { 
       var size = $("#main #gridT > thead > tr > th").size(); // get total column 
       $("#main #gridT > thead > tr > th").last().remove(); // remove last column header 
       $("#main #gridT > thead > tr").prepend("<th></th>"); // add one column at first for collapsible column 
       $("#main #gridT > tbody > tr").each(function (i, el) { 
        $(this).prepend(
          $("<td></td>") 
          .addClass("hoverEff") 
          .addClass("expand") 
          .attr('title', "click for show/hide") 
         ); 

        //now get sub table from last column and add this to the next new added row 
        var table = $("table", this).parent().html(); 
        //add new row with this subtable 
        $(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='" + (size - 1) + "'>" + table + "</td></tr>"); 
        $("table", this).parent().remove();

- >>>直到这一点一切正常。

 //// add click event for make collapsible 
       $(".hoverEff", this).live('click', function() { 
        alert($(".hoverEff").parent().closest("tr").next().text()); 
        $(".hoverEff").parent().closest("tr").next().slidetoggle(100); 
        $(".hoverEff").toggleclass("expand collapse"); 
       }); 
      }); 
      //by default make all subgrid in collapse mode 
      $("#main #gridt > tbody > tr td.expand").each(function (i, el) { 
       $(this).toggleclass("expand collapse"); 
       $(this).parent().closest("tr").next().slidetoggle(100); 
      }); 

     });

当我打开我的网页，子网格都没有崩溃，而当我按一下按钮，它不会触发任何东西。我试图检查功能是否与此代码一起工作：

alert($(".hoverEff").parent().closest("tr").next().text());

它是。我也听说内联元素不会受到.slidetoggle影响，但我的元素是一个表内的tr。我也听说.live在jQuery 2.0.0中被删除，但我通过NuGet安装了jQuery 3.0.0。我无法触发.on（'click'）事件，我开始认为我在捆绑渲染中弄乱了一些东西。

我的网格：

<div class="inner" id="inner2"> 
     <div id="main" style="padding:25px; background-color:white;"> 
      @grid.GetHtml(
      htmlAttributes: new { id = "gridT", width = "700px" }, 
      columns: grid.Columns(
        grid.Column("singleUser.RA_Responsible_Person", "RA Responsible Person"), 
        grid.Column("singleUser.Issues_Count", "Issues Count"), 
        grid.Column(header: "Min Deadline", format: (item) => string.Format("{0:dd-MM-yyyy}", item.singleUser.Min_Deadline)), 
        grid.Column(header: "Max Deadline", format: (item) => string.Format("{0:dd-MM-yyyy}", item.singleUser.Max_Deadline)), 

        grid.Column(format: (item) => 
        { 
         WebGrid subGrid = new WebGrid(source: item.Cases); 
         return subGrid.GetHtml(
          htmlAttributes: new { id = "subT" }, 
          columns: subGrid.Columns(
            subGrid.Column("Issue_ID", "Issue_ID"), 
            subGrid.Column("Issue", "Issue"), 
            subGrid.Column("Case_Status", "Case_Status"), 
            subGrid.Column("Issued_by", "Issued_by"), 
            subGrid.Column("Issue_Date", "Issue_date"), 
           ) 
          ); 
        }) 
     ) 
    ) 
     </div>

请帮助！提前致谢！

来源

2016-10-24 GeorgiG

我之前在此页面中使用过Google图表，并通过googleapis链接将jquery添加为库。我删除了它，我认为所有功能都停止了工作，但这是一个开始。

我会用另一个内容做另一个问题。

来源

2016-10-25 06:10:24 GeorgiG

是否有任何控制台错误？

我相信，toggleclass应该是toggleClass不应该？与slideToggle相同吗？

来源

2016-10-24 12:28:39 samisonline

当然是。非常感谢！无论如何，当我现在运行脚本时，它无法正常工作。当我点击图标时，它会触发所有按钮的崩溃，并且突然间我看不到这些图标了。 – GeorgiG

抱歉再次提问，点击事件之前或之后是否有任何控制台错误？ – samisonline

对不起，它说： “不推荐使用getPreventDefault（），而是使用defaultPrevented。”和“找不到元素”。我可能已经无意中复制了其他元素... – GeorgiG

.toggleclass和.slidetoggle不起作用

回答

相关问题