Question

$(document).ready(function () {
   $(".col-sm-4.righPanelRobotIcons").click(function () {
      $("#Schedule").show();
   });
});

此处.col-sm-4.righPanelRobotIcons是一个通用的div类。当我点击div时，我想要显示一个按钮，其中计划为按钮ID，并且最初是隐藏的可见性。任何人都可以帮助我吗？

Answer 1

您必须在css上使用display: none;来隐藏按钮。

＆＃13;

$(".col-sm-4.righPanelRobotIcons").click(function() {
  $("#Schedule").show();
});

＆＃13;

.righPanelRobotIcons {
  width: 100px;
  height: 100px;
  background-color: red;
}

#Schedule {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4 righPanelRobotIcons"></div>
<button type="button" id="Schedule">Click Me!</button>

＆＃13;

Answer 2

如果你有课程＆＃34;隐藏＆＃34;附加到该按钮，然后执行此操作

$(".col-sm-4.righPanelRobotIcons").click(function () {
     $("#Schedule").removeClass("hide");
});

.show（）仅在您提供css属性display：none时才有效，因为可见性：隐藏，您必须将css更改为可见性：单击时可见

$(".col-sm-4.righPanelRobotIcons").click(function () {
     $("#Schedule").css("visibility", "visible");
});

Answer 3

如果动态生成HTML，则可能必须使用jquery on事件。

您可以尝试下面的代码段：

  $(".col-sm-4.righPanelRobotIcons").on("click",function () {
            $("#Schedule").show();
  });

＆＃13;

$(".col-sm-4.righPanelRobotIcons").on("click", function() {
  $("#Schedule").show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-sm-4 righPanelRobotIcons"> Click Me!
  <button type="Button" id="Schedule" style="display:none">Schedule</button>

</div>

＆＃13;

如何在单击div时显示一个按钮

3 个答案: