javascript - 多次使用展开/折叠功能

Question

我使用 jQuery 构建了一个展开/折叠插件。当我将它与一个 div 一起使用时，它工作得很好。 但当我尝试将它与另一个 div 一起使用时，它不起作用。我在这里做错了什么？

这是我应用插件的 HTML 代码:

<div class="col">
    <div class="tabs ui-tabs ui-widget ui-widget-content ui-corner-all" id="box-resize">
        <div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-13" role="tabpanel" aria-expanded="true" aria-hidden="false">
            <div class="item">
                <ul class="item_list">
                    <li>Singapore</li>
                    <li>Singapore</li>
                    <li class="last_item_list">12 hours ago</li>
                </ul>
            </div>
        </div>
        <div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-14" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true"></div>
    </div>
    <div class="green_end mapexpand">
        <div class="column">
            <div class="mapexpand" id="mapresize">
                <span>Expand</span>
            </div>
        </div>
    </div>                        
</div>
<div class="col">
    <div class="tabs ui-tabs ui-widget ui-widget-content ui-corner-all" id="box-resize">
        <div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-13" role="tabpanel" aria-expanded="true" aria-hidden="false">
            <div class="item">
                <ul class="item_list">
                    <li>Singapore</li>
                    <li>Singapore</li>
                    <li class="last_item_list">12 hours ago</li>
                </ul>
                <a href="#"><img class="edit" src="images/icons/pencil.png"></a>
            </div>
        </div>
        <div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-14" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true"></div>
    </div>
    <div class="green_end mapexpand">
        <div class="column">
            <div class="mapexpand" id="mapresize">
                <span>Expand</span>
            </div>
        </div>
    </div>                        
</div>

这是实际的插件:

var mr=$('#mapresize');
mr.click(function() {
    if ($(this).is('.mapexpand')) { 
        $(this).removeClass('mapexpand').addClass('mapcollapse');
        $("#box-resize").animate({
            height: '100%'
        }, 500, function() {
            mr.find('span').text('collapse');
        });
    } else {
        $(this).removeClass('mapcollapse').addClass('mapexpand');
        $("#box-resize").animate({
            height: '150px'
        }, 500, function() {
            mr.find('span').text('expand');
        });
    }
    return false;
});

Answer 1

ID 必须是 unique .您对两个div使用了相同的id。最好使用class names而不是 ID

ui-tabs-1 , ui-tabs-2,mapresize...所有这些 ID 您都使用过 2 次