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...您使用过2次的所有这些ID

Answer 2

将你的ID改为课程应该有效..

id="mapresize"

到

class="mapresize"

并使用类选择器

var mr=$('.mapresize');

IDS应始终是唯一的....拥有两个或多个具有相同ID的元素无效..

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

Answer 3

使用类而不是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
        }
    }

我希望这会有所帮助

不止一次使用展开/折叠功能

3 个答案: