jQuery slideToggle多个div

我想要做的是有四个链接，每个单击时都会显示并隐藏某个div。我正在使用slideToggle，并且能够使它与真正草率和重复的代码一起工作。我的一个朋友给了我一个他使用的脚本，我试了一下，最终得到了一些可能发生的事情。但是，它所做的只是隐藏div而不会重新显示。它也隐藏了所有的div，而不仅仅是特定的div。这是我做的一个jsfiddle。希望你们能理解我想要做的和帮助的事情！非常感谢。jQuery slideToggle多个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/

来源

2014-12-11 Nick

下面是小提琴的链接。 http://jsfiddle.net/uo15brz1/7/

我改变了你的标记，为你的div添加id属性。 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 
    }); 
});

来源

2014-12-11 01:29:14 quid

非常感谢，它几乎工作如何我的意图。我想要实现的是一次只能显示一个div。例如，我希望关于我显示的是负载状态，其他3个隐藏状态。如果我点击了项目，我希望所有其他div都隐藏起来，而那个幻灯片放到视图中。你明白我想说什么吗？ – Nick 2014-12-11 01:36:49

为什么js变量不能以$开头？这是一个非常有用的约定，用于指示引用指向一个jQuery对象。它使代码更具可读性。 – Ben 2014-12-11 01:38:51

@Nick，我编辑了我的回复，所以一次只能看到一个div。 – quid 2014-12-11 01:49:50

欢迎来到Stack Overflow！

这里有一个小提琴：

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

基本上，你需要一种方法来指向基于广告点击该链接上的相关内容<div>。用你目前的标记以一种可靠的方式做到这一点很困难，所以我编辑了它。 jquery文档中的例子非常好。花一些时间研究它们，它们是开始的好方法。

来源

2014-12-11 01:37:44 Ben

jQuery slideToggle多个div

回答

相关问题