Show/hide div 带文字

Question

我正在尝试制作一个阅读更多类型的按钮，但无法正常工作，出于某种原因，文本不会被隐藏，当我单击 link 时没有任何反应？我就是想不通怎么了？

HTML 代码：

<!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

您需要将代码移至页面末尾 body 结束标记 (</body>) 之前，或将其包装在 document ready 调用中。您正在页面上存在元素之前执行代码。

例如：

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

jsFiddle example

另外，段落元素中不能有标题元素。

Answer 2

看看你错过了什么

.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;
}

<!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>

Answer 3

必须在正文末尾添加您的代码，以便在 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');
            });
        });
    }})
};

Answer 4

$("#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 5

这是我的版本。

使用 onload 构造或将代码移动到 link 存在之后
您分配的点击处理程序过多
隐藏 CSS
H3 不能是 P

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

.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;
}

<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>

Show/hide div 带文字

Show/hide div with text

html

javascript

css

show

hide