Question

到目前为止我有这个代码：

$(document).ready(function(){

    $('#panel').hide();

    $("button").click(function(){
        $("#panel").fadeIn(3000);
    });
});

HTML：

<center><button class="button" id="button">CLUJ</button></center>

    <div class="panel" id='panel'>
        <p>
            Universitatea Alexandru Ioan Cuza din Iasi <br><br>
            Universitatea din Craiova <br><br>
            Universitatea din Bucuresti <br><br>
            Universitatea Babes-Bolyai din Cluj-Napoca <br><br>
        </p>
    </div>

1.这个div并不隐藏; 2.如何在按钮点击时显示div并消失？（像手风琴一样）

Answer 1

您可以像这样使用jQuery＆＃39; fadeToggle：

$(document).ready(function(){
    $("#button").click(function(){
        $("#panel").fadeToggle(3000);
    });
});

要最初隐藏div，只需将其添加到您的css：

#panel    {
    display:none;
}

JSFIDDLE： https://jsfiddle.net/bgepfuhb/3/

对于多个面板，您可以添加如下所示的唯一ID：

    <center><button class="button" id="buttonA">CLUJ</button></center>
    <div class="panel" id='panelA'>
        <p>....</p>
    </div>

    <center><button class="button" id="buttonB">CLUJ</button></center>

    <div class="panel" id='panelB'>
        <p>....</p>
    </div>

    <center><button class="button" id="buttonC">CLUJ</button></center>

    <div class="panel" id='panelC'>
        <p>....</p>
    </div>

JSFIDDLE： https://jsfiddle.net/bgepfuhb/7/

Answer 2

隐藏和淡出不一样。

$(document).ready(function(){
    $('#panel').fadeOut(1); // <-- try 0
    $("button").click(function(){
        $("#panel").fadeIn(3000);
     });
});

Answer 3

我们走了：

 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeToggle();
        $("#div2").fadeToggle("slow");
        $("#div3").fadeToggle(3000);
    });
});
</script>


<p>Demonstrate fadeToggle() with different speed parameters.</p>

<button>Click to fade in/out boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>

<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

希望它有所帮助;）

Answer 4

使用fadeToggle（）;函数（或任何其他可用的JQuery Toggle函数）

下面的JQ，CSS和HTML

＆＃13;

 $(document).ready(function(){
   
   $('.togglebutton').toggle(function() {
    $('.hideshow').fadeToggle(300);
  }, function() {
    $('.hideshow').fadeToggle(300);
  });
   
   });

＆＃13;

.hideshow
{
  display:none;
  }

.togglebutton
{ 
  cursor: pointer;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<div class=togglebutton>
  <p> click me to toggle the next one </p>
  </div>

<div class=hideshow>
  <p> BOO! </p>
  </div>

＆＃13;

如何使div消失并在按钮单击时重新出现？

4 个答案: