Question

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

HTML dasdasdasdasd

<button>Toggle 'em</button>

JQuery的

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

有人可以帮帮我吗？

JSFIDDLE

Answer 1

您可以使用class代替id，并使用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" );
});

<强> Demo

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

<强> Working Demo

Answer 4

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

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

Demo

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

Demo

用一个onclick切换2 div

6 个答案: