如何切换广告的可见度 <aside> 元素onclick？
[英]How can I toggle the visibility of a <aside> element onclick?
问题描述
I have an <aside> element that I want to be able to hide. 
我有一个想要隐藏的<aside>元素。 The sidebar is placed as a flexbox row child as the following CodePen shows: https://codepen.io/pc-magas/pen/RexvXq 如以下CodePen所示，将侧边栏作为flexbox行子项放置： https ://codepen.io/pc-magas/pen/RexvXq
I want to be able to hide it and reveal it again with successive clicks of the button, but my code is not working correctly. 我希望能够隐藏它，并通过连续单击该按钮再次将其显示出来，但是我的代码无法正常工作。 It is only hiding the element and not showing it again on successive clicks. 它只是隐藏该元素，并且在连续的单击中不再显示它。
$(document).ready(function(){ $("#hideAside").on("click",function(){ $('aside').toggle("slide",function(){ var visibilityStatus=$('aside').attr("data-visible"); alert(visibilityStatus); $('aside').attr('data-visible',!visibilityStatus); }); }) })
.content{ display:flex; flex-direction: row; } aside{ display:flex; flex-direction: column; margin-left: 1px; } aside[data-visible="false"]{ display: none !important; flex-direction: none; }
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <header> My Page </header> <div class="content"> <aside data-visible="true"> Aside Content </aside> <main> <button id="hideAside"> Hide Aside </button> </main> </div> </body>
3 个解决方案
解决方案1
1 2018-10-16 20:30:04
The code pen works as expected with the following change to your css, just having one aside with data-attribute defined and toggling the same from your code would and should as you are already doing. 在对CSS进行以下更改后，代码笔可以按预期工作，只是将数据属性定义为aside ，然后就可以并应该从代码中切换数据属性，就像您已经在做的那样。
aside[data-visible="true"] {
display: flex;
flex-direction: column;
}
https://codepen.io/jayas/pen/bmaZXg - edited version of yours which has only one aside defined inside of CSS https://codepen.io/jayas/pen/bmaZXg-您的编辑版本，仅在CSS内部定义了一个
解决方案2
1 已采纳 2018-10-16 20:35:19
You do not actually need; 您实际上并不需要；
- The css
aside[data-visible="false"]aside[data-visible="false"]的CSSaside[data-visible="false"] - Or the slide
function,$("aside").toggle("slide")is enough to make this all work.或滑动function$("aside").toggle("slide")足以使所有这些工作。
But the issue with your code is that var visibilityStatus = $('aside').attr("data-visible") is a string and not a boolean. 但是，您的代码存在的问题是var visibilityStatus = $('aside').attr("data-visible")是一个字符串，而不是布尔值。 By explicitly converting it to a boolean, your code will work as expected. 通过将其显式转换为布尔值，您的代码将按预期工作。
var visibilityStatus = $('aside').attr("data-visible") == true
The conversion in javascript of "false" to
trueis described as coercion, and can sometimes result in unexpected "truthy" values.true被描述为强制转换，有时可能会导致意外的“真实”值。
$(document).ready(function() { $("#hideAside").on("click", function() { $('aside').toggle("slide", function() { var visibilityStatus = $('aside').attr("data-visible") == true; console.log(visibilityStatus); $('aside').attr('data-visible', !visibilityStatus); }); }) })
.content { display: flex; flex-direction: row; } aside { display: flex; flex-direction: column; margin-left: 1px; } aside[data-visible="false"] { display: none !important; flex-direction: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <body> <header> My Page </header> <div class="content"> <aside data-visible="true"> Aside Content </aside> <main> <button id="hideAside"> Hide Aside </button> </main> </div> </body>
EDIT Below is the version that functions and I only stripped out unnecessary code. 编辑下面是该功能的版本，我只删除了不必要的代码。
$(document).ready(function() { $("#hideAside").on("click", function() { $('aside').toggle("slide"); }) })
.content { display: flex; flex-direction: row; } aside { display: flex; flex-direction: column; margin-left: 1px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <body> <header> My Page </header> <div class="content"> <aside> Aside Content </aside> <main> <button id="hideAside"> Hide Aside </button> </main> </div> </body>
解决方案3
1 2018-10-16 20:39:03
$(document).ready(function(){ $("#hideAside").on("click",function(){ $('aside').toggle("slide",function(){ var visibilityStatus=$('aside').attr("data-visible"); $('aside').attr('data-visible',visibilityStatus); }); }) })
.content{ display:flex; flex-direction: row; } aside{ display:flex; flex-direction: column; margin-left: 1px; } aside[data-visible="false"]{ display: none !important; flex-direction: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <header> My Page </header> <div class="content"> <aside data-visible="true"> Aside Content </aside> <main> <button id="hideAside"> Hide Aside </button> </main> </div> </body>
Maybe like this? 也许是这样吗？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.