Question

我正在尝试阅读更多类型的按钮，但无法让它正常工作，由于某种原因，文本不会被隐藏，当我点击链接时没有任何事情发生？我似乎无法弄清楚什么是错的？

HTML CODE：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/style.css">
<title>Untitled Document</title>

<script>

$('.box').hide();


$('.clickme').each(function() {
    $(this).show(0).on('click', function(e) {

        e.preventDefault();


        $(this).next('.box').slideToggle('fast', function() {
            $(this).prev().html($(this).is(':visible') ? 'Hide' : 'Show');
        });
    });
});


</script>

</head>

<body>


<p><h3>Priser</h3></p>
<div class="container">
<div class="container">
<div class="fixed">Test af panel</div>
<div class="flex-item">795 kr.</div>
</div>
<a href="#" class="clickme">Show</a>
<div class="box">Ved installation af antenneforstærker vil du få besøg af      vores tekniker som installerer 1 stk. antenneforstærker i dit hjem.     Antenneforstærkeren er IKKE med i denne pris og skal købes ved siden af.</div>
</body>
</html>

CSS代码：

.clickme {
background-color: #eee;
border-radius: 4px;
color: #666;
display: block;
margin-bottom: 5px;
padding: 5px 10px;
text-decoration: none;
}

.clickme:hover {
text-decoration: underline;
}

.box {
background-color: #ccc;
border-radius: 4px;
color: #333;
margin: 5px 0;
padding: 5px 10px;
width: auto;
}

Answer 1

看看你想念的东西

＆＃13;

.clickme {
  background-color: #eee;
  border-radius: 4px;
  color: #666;
  display: block;
  margin-bottom: 5px;
  padding: 5px 10px;
  text-decoration: none;
}
.clickme:hover {
  text-decoration: underline;
}
.box {
  background-color: #ccc;
  border-radius: 4px;
  color: #333;
  margin: 5px 0;
  padding: 5px 10px;
  width: auto;
}

＆＃13;

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.box').hide();
      $('.clickme').each(function() {
        $(this).show(0).on('click', function(e) {
          e.preventDefault();
          $(this).next('.box').slideToggle('fast', function() {
            $(this).prev().html($(this).is(':visible') ? 'Hide' : 'Show');
          });
        });
      });
    });
  </script>
</head>
<body>
  <p>
    <h3>Priser</h3>
  </p>
  <div class="container">
    <div class="container">
      <div class="fixed">Test af panel</div>
      <div class="flex-item">795 kr.</div>
    </div>
    <a href="#" class="clickme">Show</a>
    <div class="box">Ved installation af antenneforstærker vil du få besøg af vores tekniker som installerer 1 stk. antenneforstærker i dit hjem. Antenneforstærkeren er IKKE med i denne pris og skal købes ved siden af.</div>
</body>
</html>

＆＃13;

Answer 2

您需要将代码移至关闭正文标记（</body>）之前的页面末尾，或将其包装在document ready调用中。您在页面上存在元素之前执行代码。

例如：

$( document ).ready(function() {
    // Your code here
});

<强> jsFiddle example

另外，在段落元素中不能包含标题元素。

Answer 3

$("#click").click(function(){
$("#text").toggle(500);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="click">Click</a>
<div id="text">
Hide Text
</div>

<强> Live demo

Answer 4

这是我的版本。

使用onload构造或在链接存在后将代码移动到
您分配了太多的点击处理程序
隐藏CSS中的框
H3不能是P

＆＃13;

$(function() {
  $('.clickme').on('click', function(e) {
    e.preventDefault();
    $link=$(this);
    $(this).next('.box').slideToggle('fast', function() {
      $link.html($(this).is(':visible') ? 'Hide' : 'Show');
    });
  });
});

＆＃13;

.box {
  display: none
}
.clickme {
  background-color: #eee;
  border-radius: 4px;
  color: #666;
  display: block;
  margin-bottom: 5px;
  padding: 5px 10px;
  text-decoration: none;
}
.clickme:hover {
  text-decoration: underline;
}
.box {
  background-color: #ccc;
  border-radius: 4px;
  color: #333;
  margin: 5px 0;
  padding: 5px 10px;
  width: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>Priser</h3>
<div class="container">
  <div class="container">
    <div class="fixed">Test af panel</div>
    <div class="flex-item">795 kr.</div>
  </div>
  <a href="#" class="clickme">Show</a>
  <div class="box">Ved installation af antenneforstærker vil du få besøg af vores tekniker som installerer 1 stk. antenneforstærker i dit hjem. Antenneforstærkeren er IKKE med i denne pris og skal købes ved siden af.</div>

＆＃13;

Answer 5

必须添加你的代码在主体的末尾，所以，在DOM加载后，所有元素都可以被访问。或其他技术是：

window.onload = function(){
    $('.box').hide();


    $('.clickme').each(function() {
        $(this).show(0).on('click', function(e) {

            e.preventDefault();


            $(this).next('.box').slideToggle('fast', function() {
                $(this).prev().html($(this).is(':visible') ? 'Hide' : 'Show');
            });
        });
    }})
};

使用文字

5 个答案: