0

jQuery を使用して展開/折りたたみプラグインを作成しました。1つで使用すると問題なく動作し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;
});
4

3 に答える 3

3

ID は である必要がありますunique。両方の div に同じ ID を使用しました。IDclass namesの代わりに使用することをお勧めします

ui-tabs-1 , ui-tabs-2,mapresize...あなたが2回使用したこれらすべてのID

于 2013-05-29T12:10:59.810 に答える
2

IDをクラスに変更するとうまくいくはずです..

id="mapresize"

に

class="mapresize"

クラスセレクターを使用する

var mr=$('.mapresize');

IDS は常に一意である必要があります....同じ ID を持つ 2 つ以上の要素を持つことは無効です..

注：同じIDを持つすべての要素をクラスに変更するか、一意にするようにしてください

于 2013-05-29T12:12:20.157 に答える