Question

我希望点击我的div文本出现。但不幸的是，它隐藏在第一次点击中，在第二次点击时它变得可见。怎么了？

$('#fPaperCirclePic').on('click', function () {
    $('#fPaperCircleText, #isargebla, #moq10k').css('visibility', 'visible');
    $('#fPaperCircleText, #isargebla, #moq10k').fadeToggle("slow", "linear");
});

JSBIN

Answer 1

将您的CSS更改为

#fPaperCircleText, #isargebla, #moq10k {
    display: none;
 }

并从您的javascript中删除您的CSS更改。

$('#fPaperCirclePic').on('click', function () {
    $('#fPaperCircleText, #isargebla, #moq10k').fadeToggle("slow", "linear");
});

Answer 2

从js

中删除此行

$('#fPaperCircleText, #isargebla, #moq10k').css('visibility', 'visible');

并在display:none中添加css，将其替换为visibility:hidden

fadeToggle切换display属性

＆＃13;

$(document).ready(function() {
  $('#fPaperCirclePic').on('click', function() {
    $('#fPaperCircleText, #isargebla, #moq10k').fadeToggle("slow", "linear");
  });
});

＆＃13;

#fPaperCircleText,
#isargebla,
#moq10k {
  display: none;
}
#fPaperCirclePic {
  background: red no-repeat;
  height: 100px;
  width: 100px;
  margin-top: 10px;
  margin-left: 85px;
  cursor: pointer;
}
#fPaperCircleText {} #isargebla {
  font-size: 19px !important;
  font-weight: bold;
}
#moq10k {}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="fPaperCirclePic"></div>
<span id="fPaperCircleText">                     
asdasasd <br />დამოუკიდებელი სისტემა</span>
<span id="isargebla">ისარგებლა</span>
<span id="moq10k">  <h3>10 000</h3> -ზე მეტმა მოქალაქემ </span>

＆＃13;

Answer 3

更改可见性：隐藏显示：无

jQuery fadeToggle从隐藏而不是可见开始

3 个答案: