多次使用展開/摺疊功能

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

來源

2013-05-29 Efe

IDS都應該是獨一無二的...... – bipen

這不是一個插件，這僅僅是一個函數在一個eventHandler中。 – Zim84

但是，如果我使用類，而當用戶單擊展開一個div，兩個div展開 – Efe

ID必須是unique。你用相同的ID兩個divs.It是更好使用class names代替ID

ui-tabs-1 , ui-tabs-2,mapresize...所有這些ids您使用了2次

來源

2013-05-29 12:10:59 PSR

改變你的ID來上課應該工作..

id="mapresize"

到

class="mapresize"

，並使用類選擇

var mr=$('.mapresize');

IDS應該始終是唯一的....具有兩個或更多具有相同ID的元素無效..

注意：請確保您將所有具有相同ID的元素更改爲類別或使其具有唯一性

來源

2013-05-29 12:12:20 bipen

使用類而不是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-29 12:33:20 user2432342

多次使用展開/摺疊功能

回答

相關問題