Question

你好Brainiacs老板！

我已尽力尝试一切。希望有很多JQuery专家可以帮助我。

查看我的JsFiddle

HTML：

<button type="button" id="aboutbutton" class="btnblue">About</button>

<br /><br />


<div id="contentboard">
      <button type="button" id="closebutton" class="btnclose">X</button>

      <p>
          Hello World!<br />
          Hello World!<br />
          Hello World!<br />
        Hello World!
      </p>
</div>

JS：

$('#aboutbutton').on('click', function() {
    if($('#contentboard').css('display') == 'none') {
      $('#contentboard').html(strAboutUs);
      $('#contentboard,#closebutton').fadeIn(1000);
    }
    else {
      $('#contentboard,#closebutton').toggle();
      $('#contentboard').html(strAboutUs);
      $('#contentboard,#closebutton').fadeIn(1000);
    }

  });


$('#closebutton').on('click', function() {
      $('#contentboard').fadeOut(1000);
});

这就是我要做的事情：

默认情况下，内容板div显示一些内容，div包含一个关闭按钮。当我点击关闭按钮时，div淡出 - 完美。当我点击蓝色＆＃34;关于＆＃34;按钮，我想让div淡出 - 完美。但是在fadein上，关闭按钮不会出现。

我不明白为什么会这样。我尝试使用多个选择器，以便div和关键按钮可以一起淡入，但这也不起作用。

如何让关闭按钮出现并与div一起消失？

非常感谢任何帮助。

谢谢！

Answer 1

您的#closebutton位于#contentboard内，因此，当您拨打$('#contentboard').html(strAboutUs);时，它会被删除

请改为尝试：

我没有在.html(...)上调用$('#contentboard')，而是在$('#contentboard>p')上调用，因此它只会替换#closebutton内容，而您的var strAboutUs = "Hello World! " + "Hello World! " + "Hello World! " + "Hello World! " + "Hello World!"; $('#aboutbutton').on('click', function() { if($('#contentboard').css('display') == 'none') { $('#contentboard>p').html(strAboutUs); // Changed $('#contentboard,#closebutton').fadeIn(1000); } else { $('#contentboard,#closebutton').toggle(); $('#contentboard>p').html(strAboutUs); // Changed $('#contentboard,#closebutton').fadeIn(1000); } }); $('#closebutton').on('click', function() { $('#contentboard').fadeOut(1000); });赢得了#contentboard { width:300px; height:auto; left:10; position:relative; background-color:#E0F5FF; -webkit-border-radius: 10; -moz-border-radius: 10; border-radius:10px; -webkit-box-shadow: 10px 10px 10px #666666; -moz-box-shadow: 10px 10px 10px #666666; box-shadow: 10px 10px 10px #666666; margin = 25px; padding = 25px; } .btnblue { background: #52baff; background-image: -webkit-linear-gradient(top, #52baff, #2980b9); background-image: -moz-linear-gradient(top, #52baff, #2980b9); background-image: -ms-linear-gradient(top, #52baff, #2980b9); background-image: -o-linear-gradient(top, #52baff, #2980b9); background-image: linear-gradient(to bottom, #52baff, #2980b9); -webkit-border-radius: 10; -moz-border-radius: 10; border-radius: 10px; text-shadow: 1px 3px 3px #000000; -webkit-box-shadow: 0px 2px 3px #666666; -moz-box-shadow: 0px 2px 3px #666666; box-shadow: 0px 2px 3px #666666; font-family: Arial; color: #ffffff; font-size: 24px; padding: 25px; text-decoration: none; margin-top:25px; margin-left:25px; margin-right:25px; width:250px; } .btnclose { background-color: #E5E5E5; color: #000000; font-weight: bold; position: absolute; right:1px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }消失！

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="aboutbutton" class="btnblue">About</button>

<br><br>


<div id="contentboard">
      <button type="button" id="closebutton" class="btnclose">X</button>

      <p>
        Hello World!<br>
        Hello World!<br>
        Hello World!<br>
        Hello World!
      </p>
    </div>

＆＃13;

{{1}}

＆＃13;

{{1}}

＆＃13;

Answer 2

您可以更改

$('#contentboard').html(strAboutUs);

到此：

  $('#contentboard *').not("#closebutton").remove();
  /*this line will remove all content but not the closebutton*/

  $('#contentboard').append(strAboutUs);
  /*then you can add what you want to be the new content*/

这是一种方式......也许有帮助

Answer 3

为了隐藏和显示div，你只需淡入fadeOut方法。不需要显示没有或不需要.html字符串，但是如果你想在关闭或关于按钮时改变内容只是html里面的#contentboard p

$('#closebutton').click(function(){
$('#contentboard').fadeOut('normal');
});

$('#aboutbutton').click(function(){
$('#contentboard').fadeIn('normal');
});

如何用关闭按钮淡化和淡出Div？

3 个答案: