javascript - 显示和隐藏答案

【问题标题】：javascript - show & hidejavascript - 显示和隐藏
【发布时间】：2017-02-11 14:03:21
【问题描述】：

我正在尝试创建一个显示和隐藏切换，在页面加载时隐藏元素。到目前为止...

.incl {
	position: absolute;
	z-index: 800;
	background-color: #00689C;
	text-align: left;
	padding:0 5px 5px 5px;
	color: #ffffff;
	font-size:1em;
	border-radius:3px;
	line-height:1.4em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
	$(document).ready(function(){
		$("button").click(function(){
			$("#incl").toggle(1000);
		});
	});
</script>

<button>INCLUDES</button>
  <div id="incl">
    <ul class="incl">
      <li>bla bla</li>
      <li>bla ti bla</li>
      <li>bla bla bla</li>
	</ul>
  </div>

这里的问题是当我到达页面时内容加载。我需要它。

【问题讨论】：

添加.incl { display: none; }
另外，有了这个，我希望“包含”按钮更改为“隐藏”
$("button").click(function(){ ... $(this).hide(); });
然后#incl { display: none; } insted of .incl

标签： hide show collapse

【解决方案1】：

添加了#incl { display: none; }和$("button").click(function(){ ... $(this).hide(); });

#incl {
     display: none;
 }

.incl {
	position: absolute;
	z-index: 800;
	background-color: #00689C;
	text-align: left;
	padding:0 5px 5px 5px;
	color: #ffffff;
	font-size:1em;
	border-radius:3px;
	line-height:1.4em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#incl").toggle(1000);
            $(this).hide();
        });
    });
</script>

<button>INCLUDES</button>
<div id="incl">
    <ul class="incl">
        <li>bla bla</li>
        <li>bla ti bla</li>
        <li>bla bla bla</li>
	</ul>
</div>

【讨论】：

谢谢你。我打错了，我用的是类选择器而不是 ID 选择器。这是排序的。
$("button").text('new text'); 会改变按钮中的文字，但你需要处理动画
感谢您的所有帮助。我正在使用的这段代码导致我的按钮消失。 $(document).ready(function(){ $("button").click(function(){ $("#incl").toggle(500); $(this).hide(); $("button ").text('hide'); }); });
$(this).hide(); 做消失
您需要决定何时要更改文本，是在动画开始之前还是在动画发生时或动画完成后的某个时间点，以及在动画尚未完成时处理点击，什么条件如果 #incl 或额外变量的可见性显示文本“隐藏”和“包含”。

【解决方案2】：

添加 #incl{显示：无；} 到CSS

【讨论】：

会发生什么，威尔？
$(this).hide();隐藏按钮，我想更改按钮中的文本。呼应“隐藏”