按下按钮时尝试让两个面板中的任何一个滑动切换

Question

我正在尝试创建一个代码，使两个面板之一在按下按钮时向下滑动。这是我的代码：

   $(document).ready(function(){
    $("#imageslider").click(function(){
  rand = Math.floor(Math.random() * 2) + 1;
  then if(rand==1){
$("#panel").slideToggle("slow");
        }else{
$("#panel2").slideToggle("slow");
    });
});

<button id="imageslider">Press<button>
    <div id="panel"><div id="panel"><div class="paneltest" style="background-color:black; color:white; padding:20px;">

<h2>Paris</h2>

<p>Paris is in France</p>
<div id="div1" style="width:80px;height:80px;background-color:green;"></div>
<p>Standing on the Seine Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>

</div> </div></div>
    
    <div id="panel2"><div id="panel2"><div id="paneltest" style="background-color:black; color:white; padding:20px;">

<h2>London</h2>

<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>

</div> </div></div>

我还希望在按下按钮之前让面板不可见（显示：none），这样一个或另一个就会出现。

我看不出我的代码有什么问题。任何帮助将不胜感激。

Answer 1

你搞错了很多标签。

首先，您的 javascript 功能关闭没有得到妥善处理。如果您是初学者，请尝试使用 IDE 以了解您是否缺少任何牙套。

其次是你的 html，你必须了解如何将元素相互包围，因为你所拥有的东西有两个相同的 id 并且一个按钮没有关闭正确。

$(document).ready(function() {
  $("#imageslider").click(function() {
    rand = Math.floor(Math.random() * 2) + 1;
    if (rand == 1) {
      $("#panel").slideToggle("slow");
    } else {
      $("#panel2").slideToggle("slow");
    };
  })
});

<button id="imageslider">Press</button>
<div id="panel1">
  <div class="paneltest" style="background-color:black; color:white; padding:20px;">
    <h2>Paris</h2>
    <p>Paris is in France</p>
    <div id="div1" style="width:80px;height:80px;background-color:green;"></div>
    <p>Standing on the Seine Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
  </div>
</div>
<div id="panel2">
  <div id="paneltest" style="background-color:black; color:white; padding:20px;">
    <h2>London</h2>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

为了确保 div 一开始是不可见的，您可以添加

$(document).ready(function () {
    $("#panel1").hide();
    $("#panel2").hide();
 ..
 ..

更新这是你可以做的，只是在可见性上让一个开关切换到另一个开关

$(document).ready(function () {
    $("#panel1").hide();
    $("#panel2").hide();
    $("#imageslider").click(function () {
        if (!($('#panel1').is(':visible'))) {
            $("#panel1").slideDown("slow");
            $("#panel2").hide();
        } else if (!($('#panel2').is(':visible'))) {
            $("#panel2").slideDown("slow");
            $("#panel1").hide();
        }
    });
});

按下按钮时尝试让两个面板中的任何一个滑动切换

Trying to get either one of two panels to slideToggle when button is pressed

javascript

panels

slidetoggle