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');
});

jquery addClass和removeClass没有按预期工作

3 个答案: