javascript - 用于多个 div 的 jQuery slideToggle

Question

我想做的是有四个链接，每个链接在单击时都会显示和隐藏某个 div。我正在使用 slideToggle，我能够让它与非常草率和重复的代码一起工作。我的一个 friend 给了我一个他用过的脚本，我试了一下，终于让事情发生了。但是，它所做的只是隐藏 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

这是 fiddle 的链接。 http://jsfiddle.net/uo15brz1/7/

我稍微更改了您的标记，将 id 属性添加到您的 div。 jquery 从单击的链接中获取名称属性，在前面添加#，隐藏可见的 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
    });
});