Javascript：展開/摺疊簡單代碼的多個DIV？

-1

我在我的頁面上有幾個DIV，我希望能夠展開/摺疊。我使用下面的代碼來這樣做，但它只適用於整個類。我可以將它應用於被點擊的任何東西嗎？（例如，self.slideToggle（）;）Javascript：展開/摺疊簡單代碼的多個DIV？

// Activate Toggle for Showing/Hiding More Price Tables 
     $(".slidingDiv").hide(); 
     $(".show_hide").show(); 

    $('.show_hide').click(function(){ 
    $(".slidingDiv").slideToggle(); 
    return false; 
    }); 

});

編輯：這裏是標記的一個例子：

<a href="#" class="show_hide">Video & Music</a> 
    <div class="slidingDiv">CONTENT HERE</div>

來源

2011-08-24 Zakman411

這將工作。

$('.show_hide').click(function(){ 
     $(this).next('.slidingDiv').slideToggle(); 
     return false; 
});

的jsfiddle - http://jsfiddle.net/ABrunkhorst/vFnqp/1/

來源

2011-08-24 23:24:04

編輯來顯示標記。您提到的代碼使DIV永久消失haha – Zakman411

已編輯以適合您的標記。 –

謝謝！完美工作 – Zakman411

使用$(this) click事件裏面。

或者如果你點擊div中的東西，然後像父母的關鍵字。

所以$(this).parent(".slidingDiv").slideToggle();

編輯

你可以我想也利用這一點，根據您的修改;

$(this).next('.slidingDiv')

來源

2011-08-24 23:24:45 griegs

使用$(this)函數調用內部將參考對象的範圍，在這種情況下，一個被點擊。

$('.show_hide').click(function(){ 
    $(this).next('.slidingDiv').slideToggle(); 
    return false; 
});

相反的next()你可以考慮：

children() - 只選擇兒童的第一級
contents() - 如果你想獲得的所有子元素的後代（兒童+兒童）點擊
siblings() - 讓那些在層級樹
prev()同一級別的所有元素 - 獲得前一個兄弟
next() - 拿到第一個兄弟
prevAll() - 讓以前所有的兄弟姐妹
nextAll() - 把所有的下一個兄弟姐妹
parents() - 獲得點擊的元素的anscestors（包裝）

來源

2011-08-24 23:29:55 vol7ron

感謝您的回覆，但這並沒有工作... DIVs沒有展開或崩潰在所有 – Zakman411

Zakman411：您的標記是有限的，並使縮進看起來像div是嵌套，你應該清理你的標記。我已經修改了上面的答案，但是您應該列出完整的標記 – vol7ron

我們可以使用我們可以高效切換的JQUERY UI Accordion。我們必須添加以下的JQuery鏈接

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
    <script> $(function() { 
    $("#accordion").accordion(); 
    }); 
    </script> 
    <div id="accordion"> 
    <h3>Section 1</h3> 
    <div> 
    <p>This is division 1 
    </p></div> 
    <h3>Section 2</h3> 
    <div> 
    <p>This is division2</p></div>

欲瞭解更多詳情，請參閱本http://jqueryui.com/accordion/

來源

2014-06-09 09:44:27

Javascript：展開/摺疊簡單代碼的多個DIV？

回答

相關問題