Question

我的屏幕上有NEXT和PREVIOUS按钮。当页面最初加载时我希望隐藏上一个按钮，一旦用户单击下一步按钮我想要上一个按钮（div标签可见）。我有一个上一个按钮的CSS属性，我将可见性值设置为False。还有一个if语句，我检查页面计数器是否大于1然后将navigationButtonTop的可见性更改为true。它没有用......我做错了什么！？

$(function() {
  $("#navigationButtonTop").css("visibility", "visible");
});

div.navigationButtonTop {
  visibility: hidden;
  height: 100px;
  width: 100px;
  background-color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navigationButtonTop"></div>

Answer 1

首先你没有关闭你的if语句，navigationButtonTop是一个不是id的类试试这个。

if (that.get("pageCounter") >= 1) {
     $(".navigationButtonTop").css("visibility", "visible");
}

OP已经编辑了他的问题，新答案将是：

$(function() {
  $(".navigationButtonTop").css("visibility", "visible");
});

Answer 2

在你的JS中，你使用ID（选择器名称前的“＃”符号）。但是在CSS中你使用CLASS（选择器名称前面的点符号）。

尝试在两种情况下使用“＃”（或相应地点）。

Answer 3

Havde你试过$（＆＃34;＃navigationButtonTop＆＃34;）。show（）;

Answer 4

首先，你真正喜欢触发事件的代码，很高兴知道。也许触发器根本不起作用？

另外，你的回答不同。在CSS navigationButtonTop中是一个类（参见“。”），在JS中它是一个id（参见“＃”）。这是你的代码中的罪魁祸首吗？如果不是，我会认为它是一个进一步的id ...

为了更具可读性，请尝试将visibility: hidden移至额外的隐藏类。所以你可以触发：

$("#navigationButtonBottom").on('click', function() {
  $("#navigationButtonTop").removeClass('hidden');
});

在您的HTML中，将班级hidden添加到按钮

#navigationButtonTop.hidden { visibility:hidden; }

或者使用javascript：

jQuery(document).ready( function($) {
  $("#navigationButtonTop").addClass('hidden');
})

Answer 5

Here 一个很好的 jQuery 插件，它使我免于进行 Materialize's collapsible 自定义，以避免使用 click 事件替换为 {{1} } 事件。

特别是，使用的代码（在插件页面中描述的各种替代方案中）是：

<块引用>

HTML

visibilityChanged

<块引用>

JS

<li id="collapsible_trigger">
    <div class="collapsible-header"></div>
    <div class="collapsible-body"></div>
</li>

<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="hideshow.min.js"></script>

如何使用jQuery将div css的可见性更改为可见

5 个答案: