Question

我在同时打开/关闭div时遇到问题。我已经阅读了很多关于它的内容，尝试了一切，但似乎没有什么工作......这就是它应该是这样的：

这是我得到的代码。它与一个DIV完美配合：

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();

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

我希望这可以使用3个div或更多：当点击一个新链接并且div出现幻灯片时，当前打开的div会关闭幻灯片。

很高兴收到你的来信:-)非常感谢你！

Answer 1

$(".slidingDiv2").slideToggle();尝试添加此行。希望它可能会有所帮助。

好吧，我第一次没有得到你所以我刚刚发布了那部分：加上这个

$('.menu').click(function(){
    $(".slidingDiv").slideToggle();
    $(".slidingDiv2").slideToggle();
    });

这会有所帮助。实际上你的代码最初只是用show_hide类点击。如果你想让你的超链接工作，你可以使用超链接上的类。

Answer 2

如果我理解正确，我认为你是在追求这样的事情：

$('a.link').on('click', function(e) {

  e.preventDefault();
  var slideSelector = '#' + $(this).attr('id').replace('link', 'slide');

  // slide down the div which corresponds to the clicked anchor,
  $(slideSelector).slideDown(500, function() {
    // slide the rest up
    $('div.slide').not($(slideSelector)).slideUp(500);
  });

  // or do it in the reverse order
  $('div.slide').not($(slideSelector)).slideUp(500, function() {
    $(slideSelector).slideDown(500);
  });      

});

以下是我用于上述示例的标记： -

<a id="link1" class="link" href="#">Link 1</a>
<a id="link2" class="link" href="#">Link 2</a>
<a id="link3" class="link" href="#">Link 3</a>

<div class="slide" id="slide1">Slide Example #1</div>
<div class="slide" id="slide2">Slide Example #2</div>
<div class="slide" id="slide3">Slide Example #3</div>

请注意，<a>和<div>都已被赋予id，这些用于将两者联系在一起（请查看{{1} }}）。

Here's a fiddle which will toggle between each of the above examples each time a link is clicked

这只是一种方法，例如另一种方法是将链接和div包装在单独的容器中，然后使用slideSelector来选择与点击链接对应的div，但是，链接和div必须以相同的顺序出现才能生效。

在使用jquery SLIDETOGGLE //可见/隐藏的新OPENS之前，使用幻灯片关闭所有Div？

2 个答案: