简单的 Javascript 无法隐藏 div

Question

我正在尝试学习一点 java 脚本，任何帮助将不胜感激，因为我对这个世界还很陌生，只是在学习。我尝试在此站点上下查找，并尝试了其他用户的一些建议，但似乎没有一个真正回答我的问题。

我有这段代码：

我只是想让它在单击 x 时慢慢隐藏一个 div 框。该按钮出现并且可以单击但没有任何反应。有人可以帮我看看我做错了什么吗？

<div id="daily_deal">
    <button id="close_x" onclick="myFunction($)"><img src="/assets/templates/blacbold_TEST/images/red_x.png" /></button>
    <div id="widget"><iframe src="dailydeal_widget.asp" scrolling="no" frameborder="0"     style="border:none; overflow:hidden; width:155px; height:355px;" allowtransparency="true"></iframe></div>

  function myFunction($) {
      $(document).ready(function() {
          $("#close_x").click(function () {
              $("#widget").slideToggle("slow");
          });
      });
  })(jQuery);

Answer 1

你只需要这一点：

$(document).ready(function() {
      $("#close_x").click(function () {
          $("#widget").slideToggle("slow");
      });
  });

然后您可以从按钮中删除onclick：

<button id="close_x"><img src="/assets/templates/blacbold_TEST/images/red_x.png" /></button>

它所做的是在您单击按钮时绑定到文档就绪事件，但由于这已经发生，绑定单击事件的代码永远不会运行。

Answer 2

使用

<button id="close_x" onclick="toggleWidget();">

和

function toggleWidget() {
    $("#widget").slideToggle("slow");
}

Answer 3

您可以删除$(document).ready() 行。也就是说，从您的函数中删除第 2 行和第 6 行。这意味着您想在页面加载后做一些事情，这不会在调用此函数的同时发生。

Answer 4

你只需要这个代码：

$(document).ready(function() {
      $("#close_x").on("click", function () {
          $("#widget").slideToggle("slow");
      });
  });

onclick="myFunction($)" 不再需要了。

Answer 5

onclick 中不需要调用函数，所以生成的 html 应该是这样的。

<button id="close_x"><img src="/assets/templates/blacbold_TEST/images/red_x.png" /></button>

你的脚本应该是

 $(document).ready(function() {
          $("#close_x").click(function () {
              $("#widget").slideToggle("slow");
          });
      });

Answer 6

你可以试试这个功能来隐藏和显示 div 标签：

$(document).ready(function(){

    $(".productDescription").hide();
    $(".show_hide").show();

$('.show_hide').click(function(){
$(".productDescription").slideToggle();
return false;
});

});

喜欢 HtmL 代码：

<a href="#" class="show_hide">See Full Description</a>
<div class="productDescription">
  <p>This very large bath bomb will fizz up to two minutes, how good is that. Drizzled   with soap it looks so authentic. This cake slice has a scent of Tropical Fruit including   Pineapple, Mango & Grapefruit and you'll be surrounded by gorgeous flowers and glitter.   <a  href="#" class="show_hide">Hide</a></p></div>