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

尝试此操作，它将折叠您单击任何展开按钮的其他内容。

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

Answer 2

尝试此操作，您需要在设置新类之前从所有其他类中删除该类。 为了仍然能够切换它们，您需要跟踪是否再次单击其相同的项目。

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 3

您可以使用切换类，或在每次单击搜索时使用该类，然后将其删除。 例：

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