为什么show（）仅能瞬间使用？
[英]Why does show() only work for a split second?
问题描述
我试图让列表项在单击时出现。 当我使用hide（）方法时，它们开始是隐藏的，但是当我添加show（）方法时，它只能工作大约一毫秒。 不确定是否因为它总是默认返回到原始设置？ 我基本上只想单击主列表<a>在这种情况下是“主列表”，然后出现其他两个
$(function() { $('.sublist').hide(); $(".mainlist").on('click', function() { $('.sublist').show(); }); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <ul> <li> <a href="" class="mainlist">Main List</a> <li> <a href="" class="sublist">Sublist One</a> </li> <li> <a href="" class="sublist">Sublist Two</a> </li> </li> </ul>
5 个解决方案
解决方案1
2 2018-10-04 14:15:34
单击链接后，整个页面都会刷新。 这意味着您的代码将再次运行：
$('.sublist').hide();
您应该做的是防止出现以下默认行为：
$(".mainlist").on('click', function(event) {
$('.sublist').show();
event.preventDefault();
});
解决方案2
2 2018-10-04 14:15:38
问题是，当你点击你的那些页面重新加载得到a因要素， href=""他们。 因此div开始是隐藏的，然后单击以显示它们，但是页面刷新后又恢复为隐藏状态（由于这是新加载页面上的默认状态，这要归功于页面就绪回调中的hide调用） ）。
如果您不希望遵循这些链接，请在jQuery处理程序中通过preventDefault （或return false ）单击它们时阻止默认操作：
$(function() {
$('.sublist').hide();
$(".mainlist").on('click', function(e) {
e.preventDefault();
$('.sublist').show();
});
})
现场示例：
$(function() { $('.sublist').hide(); $(".mainlist").on('click', function(e) { e.preventDefault(); $('.sublist').show(); }); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <ul> <li> <a href="" class="mainlist">Main List</a> <li> <a href="" class="sublist">Sublist One</a> </li> <li> <a href="" class="sublist">Sublist Two</a> </li> </li> </ul>
或者，您可以使用一种hack： href="javascript:;" ，但最好使链接有意义，然后使用脚本提供含义。
解决方案3
2 2018-10-04 14:16:26
有两个问题：
首先，您将li元素直接嵌套在li元素内-如果要“子列表”，则需要将子项目包装在ul （请参见下面的修改代码）。
其次，正在跟踪链接，这将导致页面刷新。 如果要显示的全部是要显示的sublist项，则应在事件上使用event.preventDefault （请参阅下面的修改后的代码）。
// no-conflict safe document ready jQuery(function($) { $('.sublist').hide(); // click event accepts one argument for the "event" $(".mainlist").on('click', function(e) { // prevent the default "click" action (which is to load the url the link points to) e.preventDefault(); $('.sublist').show(); }); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li> <a href="" class="mainlist">Main List</a> <!-- nested li elements need to be wrapped inside a ul --> <ul> <li> <a href="" class="sublist">Sublist One</a> </li> <li> <a href="" class="sublist">Sublist Two</a> </li> </ul> </li> </ul>
解决方案4
1 2018-10-04 14:20:26
由于您使用的锚a标签，并且有一个空的href属性，默认的行为应的页面重定向锚点击。 解决方法是在点击回调中使用href="javascript:void(0)"或event.preventDefault()
$(function() { $('.sublist').hide() $(".mainlist").on('click', function(e) { /* here, prevents redirection */ if (e) { e.preventDefault() } $('.sublist').show() }) })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li> <a href="javascript:void(0)" class="mainlist">Main List</a> <li> <a href="" class="sublist">Sublist One</a> </li> <li> <a href="" class="sublist">Sublist Two</a> </li> </li> </ul>
解决方案5
-1 2018-10-04 14:23:02
您的代码的这一部分：
$(".mainlist").on('click', function() {
$('.sublist').show();
});
告诉仅在单击事件期间显示列表。
为什么不改用fadeIn（）效果函数呢？
$( "#appears" ).hide(); $( "#clickme" ).click(function() { $( "#appears" ).fadeIn( "slow", function() { }); });
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div id="clickme"> Click here </div> <div id="appears"> <ul> <li>I'm a list</li> </ul> </div> </body> </html>
为什么 v-for 只工作一瞬间？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.