0

我使用 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;
});
4

3 回答 3

3

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

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 的两个或多个元素是无效的..

注意：确保将具有相同 ID 的所有元素更改为类或使其唯一

于 2013-05-29T12:12:20.157 回答
0

使用类而不是 ID 在您的函数中，您没有确定需要关闭哪个 div，因此它将关闭两个 div 或根本不工作。

您应该提及哪个 div 需要折叠或打开。让您的函数搜索您单击的跨度的父级：-

    <div class = "a">
        <div class - "b">
            <div class = "c">
                <span class = "click-me">Close</span>
           </div>
        </div>
    </div>

   <div class = "a">
        <div class - "b">
            <div class = "c">
                <span class = "click-me">Close</span>
            </div>
        </div>
    </div>


    jquery (".click-me").click (function (e)) {
        if (your-condition) {
            $(this).parents (".a").animate-function-here
        }
        else {
            $(this).parents (".a").animate-function-here
        }
    }

我希望这有帮助

于 2013-05-29T12:33:20.890 回答