Question

我要做的是有四个链接，每个链接都会显示并在点击时隐藏某个div。我正在使用slideToggle，我能够使用非常草率和重复的代码。我的一个朋友给了我一个他用过的剧本，我试了一下，最后能够得到一些事情。然而，它所做的只是隐藏div并且不会重新显示。它也隐藏了所有的div而不是特定的div。这是我制作的一个小提琴手。希望你们能理解我想要做的事情并提供帮助！非常感谢。

这是我正在使用的脚本。

$(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文档中的示例非常好。花些时间研究它们，它们是开始的好方法。

jQuery slideToggle用于多个div

2 个答案: