jquery addClass和removeClass未按预期工作

Question

我有一些由div标记分隔的表。当有人点击一个字母时，我只想查看相关的div标签内容。我可以用这个jQuery代码来做到这一点。

$(".expand_button").on("click", function() { 
     $(this).next(".expander").addClass('view_expander'); 
    }); 

但事情是当用户点击另一封信时，它也显示其内容不断显示以前点击的div内容。我需要的是如果用户点击另一个字母以前的东西必须隐藏。我试图通过删除类“view_expander”来完成它，但它没有工作。

$(".expand_button").on("click", function() { 
      $(this).next(".expander.view_expander").removeClass('view_expander'); 
     }); 

。

<div class="expand_button"> 
     <h1>A</h1> 
    </div> 
    <div id="a_section" class="expander"> 
     <table> 
      <tr> 
       <td> 
        Ambalanthota 
       </td> 
       <td> 
        Isuru Morots 
       </td> 
       <td> 
        B. G. A. Gamini 
       </td> 
       <td> 
        0727610675 <br> 0472225200 
       </td> 
       <td> 

       </td> 
       <td> 
        195/1, D S Senanayake Mw, Ambalanthota 
       </td> 
      </tr> 

     </table> 
    </div> 
    <div class="expand_button"> 
     <h1>B</h1> 
    </div> 
    <div id="b_section" class="expander"> 
     <table> 
      <tr> 
       <td> 
        Bandarawela 
       </td> 
       <td> 
        GTS Holding(Pvt)Ltd 
       </td> 
       <td> 
        CK Bopitiya 
       </td> 
       <td> 
        0773529044 <br> 0572231231 
       </td> 
       <td> 
       </td> 
       <td> 
        No.38Badulla Road,Bandarwela. 
       </td> 
      </tr> 

     </table> 
    </div> 

Answer 1

试试这个，你需要先删除所有其他类，然后再设置新类。为了能够继续切换它们，您需要跟踪是否再次单击其相同的项目。

var selected = null; 

$(".expand_button").on("click", function() { 

    if (this !== selected) { 
     $(".view_expander").removeClass("view_expander"); 
    } 

    $(this).next(".expander").toggleClass('view_expander'); 
    selected = this; 
}); 

的jsfiddle http://jsfiddle.net/zTN6U/1/

Answer 2

试试这个，它会折叠其他内容，你点击任何展开按钮。

$(".expand_button").on("click", function() { 
    $(".expander").removeClass("view_expander"); 
    $(this).next(".expander").toggleClass('view_expander'); 
}); 

Answer 3

您可以使用切换类或每次点击搜索，如果有与类的元素，将其删除。 例子：

$(".expand_button").on("click", function() { 
    var expender = $('.view_expender'); 
    If (expender.length > 0) { 
     $(expender).removeClass('view_expander'); 
    } 
    $(this).next(".expander").toggleClass('view_expander'); 
});