jQuery slideToggle用於多個div

Question

我想做的是有四個鏈接，每個鏈接都將在單擊時顯示和隱藏某個div。 我正在使用slideToggle，並且能夠使它與真正草率且重復的代碼一起使用。 我的一個朋友給了我他使用的腳本，我嘗試了一下，終於能夠使事情發生。 但是，它所做的只是隱藏div並不會重新顯示。 它還隱藏所有div，而不僅僅是特定的div。 這是我制作的jsfiddle。 希望你們能理解我正在做的事情和提供的幫助！ 非常感謝。

這是我正在使用的腳本。

$(document).ready(function () {
$(".click_me").on('click', function () {
    var $faq = $(this).next(".hide_div");
    $faq.slideToggle();
    $(".hide_div").not($faq).slideUp();
});
});

http://jsfiddle.net/uo15brz1/

Answer 1

這是小提琴的鏈接。 http://jsfiddle.net/uo15brz1/7/

我對您的標記做了一些更改，為您的div添加了id屬性。 jQuery從單擊的鏈接獲取name屬性，在前面添加＃，隱藏可見的div，然后切換相應的div。 我還添加了e.preventDefault，以防止由於哈希更改而導致瀏覽器無法導航。 順便說一句，javascript不需要$前綴。

$(document).ready(function () {
    $(".click_me").on('click', function (e) {
        e.preventDefault();
        var name = $(this).attr('name');
        var target = $("#" + name);
        if(target.is(':visible')){
            return false; //ignore the click if div is visible
        }
        target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo
        $('.hide_div').slideUp(); //hide all divs on link click
        target.slideDown(); // show the clicked one
    });
});

Answer 2

歡迎使用Stack Overflow！

這是一個小提琴：

http://jsfiddle.net/uo15brz1/2/

基本上，您需要一種基於單擊的鏈接指向相關內容<div>方法。 用您當前的標記以健壯的方式執行此操作比較棘手，因此我已對其進行了編輯。 jQuery文檔中的示例非常好。 花一些時間研究它們，它們是入門的好方法。