Question

当我点击菜单上的链接时，div会向下滑动以显示一些内容。但问题是，我一次只想要一个div。

正如你在小提琴上看到的，如果你点击一个链接，会出现一个div，如果你点击另一个链接，另一个div会出现在第一个div下面。

我一次只想要一个DIV。我应该在我的javascript代码中修改什么来做到这一点？

PS：如果我再次点击同一个链接，我希望隐藏我的div：

点击“首页” - ＆gt;显示div 点击“首页” - ＆gt;关闭div

    $(document).ready(function(){

  $("#flip").click(function(){
    $("#panel").slideToggle("fast");
  });
   $("#flip2").click(function(){
    $("#panel2").slideToggle("fast");
  });
     $("#flip3").click(function(){
    $("#panel3").slideToggle("fast");
  });
     $("#flip4").click(function(){
    $("#panel4").slideToggle("fast");
  });
});

http://jsfiddle.net/U52rr/8/

感谢您的回答，我非常感谢您的帮助！

Answer 1

好的伙计，首先，你不能有超过1个具有相同身份的元素，所以这应该是你清除的第一件事，其次你可以清理你的标记并让事情更容易管理例如：

<nav>
   <ul>
      <li><a class="flip" href="#panel1">Home</a></li>
      <li><a class="flip" href="#panel2">Agenda</a></li>
      <li><a class="flip" href="#panel3">Media</a></li>
      <li><a class="flip" href="#panel4">Contact</a></li>
   </ul>
</nav>
...
<div class="panel" id="panel1">
    <div>Anatomy</div>
</div>
<div class="panel" id="panel2">
    <div>Anatomy is</div>
</div>
<div class="panel" id="panel3">
    <div>Anatomy is destiny.</div>
</div>
<div class="panel" id="panel4">
    <div>Anatomy is destiny555.</div>
</div>

现在，您只需按类别定位所有链接和面板（也应该清理您的CSS）。

然后是javascript：

$(".flip").on("click", function(e) {        
    var target = $(this).attr("href");
    $(target).slideToggle("fast");
    $(".panel").not(target).hide();

    e.preventDefault();
});

这是小提琴：http://jsfiddle.net/U52rr/43/

Answer 2

您可以使用相同的HTML并使用此方法更简单：

主要是我遍历UL内部的所有链接，并且只能使用绑定点击的功能。

在使面板链接可见之前，必须隐藏所有其他可见的

$(document).ready(function(){
  $("nav ul a").click(function(){
    $('#layer > div:visible').hide();
    $('#' + (this.id).replace('flip','panel')).slideToggle("fast");
  });
});

http://jsfiddle.net/U52rr/29/

Answer 3

$(document).ready(function () {

    $("#flip").click(function () {
        $('.current').removeClass('.current').hide();
        $("#panel").addClass("current").slideDown("fast");
    });
    $("#flip2").click(function () {
        $('.current').removeClass('.current').hide();
        $("#panel2").addClass("current").slideDown("fast");
    });
    $("#flip3").click(function () {
        $('.current').removeClass('.current').hide();
        $("#panel3").addClass("current").slideDown("fast");
    });
    $("#flip4").click(function () {
        $('.current').removeClass('.current').hide();
        $("#panel4").addClass("current").slideDown("fast");
    });
});

您需要隐藏（或向上滑动 - 取决于您想要的外观）当前显示的div。我在显示的div中添加了一类电流来跟踪它。 http://jsfiddle.net/U52rr/8/

Answer 4

我会在您的div和链接中添加一个类，并在您的链接上添加点击事件，例如：

$(document).ready(function(){
    $('.linkClass').click(function(){
        $('.divClass').not($(this).parent('.divClass')).hide();
        $(this).parent('.divClass').slideToggle("fast");
    });
}

这将隐藏除了点击链接的div之外的所有其他div。

Answer 5

DEMO

为所有div添加一个类而不是ID更快。

$("#flip").click(function(){
    $(".panelClass").hide();
    $("#panel").slideDown("fast");
});

Answer 6

将类添加到所有div ..

 $("#flip3").click(function(){
 $(".close").hide();
 $("#panel3").slideToggle("fast");

DEMO JSFIDDLE

Answer 7

试试这个：

var $panels = $(".panel").hide();
$(".link").click(function(e){    
    e.preventDefault();    
    var $panel = $panels.eq($(this).data("index"));
    $panels.not($panel).slideUp();    
    if($panel.is(":visible")){
       $panel.slideUp();
        return;
    }        
    $panel.slideDown();
});

在这里工作小提琴：http://jsfiddle.net/U52rr/33/

我希望它有所帮助。

Answer 8

执行.slideToggle（）时，可以同时执行其他人的.hide（）。

$("#flip").click(function(){
$("#panel").slideToggle("fast");
$("#panel2").hide("fast");
$("#panel3").hide("fast");
$("#panel4").hide("fast");

这个FIDDLE应该有所帮助：http://jsfiddle.net/U52rr/12/

一次显示一个div

8 个答案: