用一個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" );
});

演示