用一个onclick切换2 div

Question

我有2个div，我需要用一个按钮切换它们，第一个向上滑动，第二个向下滑动。

HTML dasdasdasdasd

<button>Toggle 'em</button>

JQuery的

$( "button" ).click(function() {
  $( "#nav" ).slideUp();
});

有人可以帮帮我吗？

的jsfiddle

Answer 1

您可以使用class而不是id并使用display:none;隐藏一个div display:none;

HTML：

<div class="nav" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
 <div class="nav" style="background:gray; height:200px;display:none;"></div>

<button>Toggle 'em</button>

jQuery的

$( "button" ).click(function() {
  $( ".nav" ).toggle( "slow" );
});

演示

Answer 2

使用class或name属性而不是id 。

HTML

<div class="nav" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
 <div class="nav" style="background:gray; height:200px"></div>

<button>Toggle 'em</button>

JS

$( "button" ).click(function() {
  $( ".nav" ).toggle( "slow" );
});

的jsfiddle

PS

永远不要对两个元素使用相同的id 。 id应该是unigue。

Answer 3

重复的id是无效的html，你应该改用class。

您还需要在开始时隐藏一个元素以进行切换：

$( "button" ).click(function() {
  $( ".nav" ).slideToggle( "slow" );
});

工作演示

Answer 4

您需要隐藏一个元素以不同方式切换它们

$( "button" ).click(function() {
  $( "#nav1" ).slideToggle( "slow" );
    $( "#nav2" ).slideToggle( "slow" );
});

演示

Answer 5

看来你的div有nav ID。 为了选择2个div，您可以尝试为两者分配相同的类名，例如： <div class="nav"></div> （x2）

然后将你的jQuery更改为： $('.nav').slideUp();

这样，jQuery知道选择两个 div并将它们向上滑动。

Answer 6

尝试这个，

HTML

<div id="nav1" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div id="nav2" style="background:gray; height:200px"></div>

还有一些CSS

#nav1{
    display:none;
}

脚本

$( "button" ).click(function() {
  $( "#nav1,#nav2" ).slideToggle( "slow" );
});

演示