按钮单击使内容出现在 _Layout.cshtml答案

【问题标题】：Button click makes content appear in _Layout.cshtml按钮单击使内容出现在 _Layout.cshtml
【发布时间】：2017-10-27 13:14:51
【问题描述】：

在我的视图顶部/Home/Clear.cshtml，我有

<button type="button" id="show" class="find-proj">Find Project</button>

在 /Shared/_Layout.cshtml 视图的底部，我有一个包含在

中的表格

<div class="wrapper">...</div>

我的 CSS 有

.wrapper { display: none; }

在 /Shared/_Layout.cshtml 视图的头部，我有以下脚本：

<script>
$(document).ready(function(){
  $("#show").click(function(){
    $(".wrapper").show();
  });
});
</script>

目标是当我按下按钮时，表格会出现在页面底部。该表目前是不可见的，但是当我按下按钮时，什么也没有发生。
编辑： 错误是由于某种奇怪的原因，jQuery 被加载到页面底部。我将$(".wrapper").show(); 更改为$(".wrapper").css('display','block'); 并将jQuery 移到它之前加载，它就像一个魅力。谢谢大家！

【问题讨论】：

javascript事件触发了吗？
我只是将您的代码放入一个 sn-p 中，它按预期工作。你忘了包括 jquery 吗？浏览器控制台中的任何错误？浏览器中呈现的 HTML 是否正确显示？

标签： javascript c# asp.net asp.net-mvc

【解决方案1】：

我认为你可以尝试以下方式。

$('.wrapper').css('display','block');

还请查看以下链接的评论：

https://stackoverflow.com/a/5059661/3397630

希望对您有所帮助，请让我知道您的想法或反馈谢谢

卡提克

【讨论】：

【解决方案2】：

确保没有任何 JS 错误，并且 $("#show") 选择器以及 $(".wrapper") 选择器返回结果。这可能是问题所在；但是，也可能是 show() 调用没有覆盖包装器 display:none 定义。一种解决方法是：

1) 向 DIV 添加一个类：

<div class="find-project wrapper">...</div>

2) 然后将按钮点击处理程序更改为：

<script>
$(document).ready(function(){
  $("#show").click(function(){
    $(".find-project").removeClass("wrapper");
  });
});
</script>

稍后您可以通过以下方式重新添加类来再次隐藏它：

$(".find-project").addClass("wrapper");

由于包装类定义了display: none，调用show() 似乎并没有覆盖它，在这种情况下，有一个类来识别元素和一个类来显示/隐藏它是完美的组合。

【讨论】：

【解决方案3】：

.show() 设置 style 属性，其中 display:none 存在于 .wrapper 类中。这些往往会发生冲突。使用其中一种。我发现拥有一个 .hidden{display:none;} 类并在 .addClass('hidden') 和 .removeClass('hidden') 或 $('.wrapper').toggleClass('hidden') 之间切换更容易

【讨论】：