2

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

正如您在小提琴中看到的那样，如果您单击一个链接，则会出现一个 div，如果您单击另一个链接，则会在第一个 div 下方出现另一个 div。

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

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

点击“HOME” -> 显示 div 点击“HOME” -> 关闭 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/

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

4

8 回答 8

3

好的，伙计，首先，您不能拥有超过 1 个具有相同 id 的元素，所以这应该是您清除的第一件事，其次您可以稍微清理一下标记并让一些东西更易于管理，例如：

<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/

于 2013-08-20T18:24:19.050 回答
1

您可以使用相同的 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/

于 2013-08-20T18:15:08.997 回答
0 
$(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 中添加了一个 current 类来跟踪它。 http://jsfiddle.net/U52rr/8/

于 2013-08-20T18:12:42.917 回答
0

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

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

这将隐藏所有其他 div，除了单击链接的那个。

于 2013-08-20T18:13:05.557 回答
0

演示

将一个类添加到所有 div 而不是 ID 以更快。

$("#flip").click(function(){
    $(".panelClass").hide();
    $("#panel").slideDown("fast");
});
于 2013-08-20T18:13:33.233 回答
0

将类添加到所有 div ..

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

演示 JSFIDDLE

于 2013-08-20T18:17:16.917 回答
0

尝试这个：

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/

我希望它有帮助。

于 2013-08-20T18:31:36.860 回答
-2

执行 .slideToggle() 时，可以同时执行其他的 .hide()。

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

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

于 2013-08-20T18:12:25.953 回答