显示/隐藏带有文本的div

Question

I'm trying to make a read more type of button but can't get it to work right, for some reason the text will not be hidden and nothing happends when I click the link? 我正在尝试使按钮的类型更多，但无法使其正常工作，由于某种原因，当我单击链接时，文本不会被隐藏并且什么也没发生？ I just can't seem to figure out whats wrong? 我只是似乎无法弄清楚出什么问题了？

HTML CODE: 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 CODE: 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

Have a look You miss few thing 看看你错过了几件事

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

You need to move your code to the end of the page before the closing body tag ( </body> ), or wrap it within a document ready call. 您需要将代码移至结束body标签（ </body> ）之前的页面末尾，或将其包装在文档就绪调用中。 You're executing code before the elements exist on the page. 您要在页面上的元素存在之前执行代码。

Ex: 例如：

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

jsFiddle example jsFiddle示例

And on a side note, you can't have heading elements within paragraph elements. 另外，段落元素中不能包含标题元素。

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

Here is my version. 这是我的版本。

use an onload construct or move the code to after the link exists 使用onload结构或将代码移动到链接存在之后
you assign too many click handlers 您分配的点击处理程序过多
Hide the box in CSS 在CSS中隐藏框
H3 cannot be a child of P 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>

Answer 5

Must add your code At the end of the body so, after DOM loaded all elements can accessed. 必须在主体末尾添加代码，以便在DOM加载后可以访问所有元素。 or other technique is: 或其他技术是：

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');
            });
        });
    }})
};

显示/隐藏带有文本的div

问题描述

5 个解决方案

解决方案1
3 已采纳 2016-03-17 12:17:18

解决方案2
2 2016-03-17 12:13:55

解决方案3
0 2016-03-17 12:28:55

解决方案4
0 2016-03-17 12:42:53

解决方案5
-1 2016-03-17 12:24:29

显示/隐藏带有文本的div

问题描述

5 个解决方案

解决方案1 3 已采纳 2016-03-17 12:17:18

解决方案2 2 2016-03-17 12:13:55

解决方案3 0 2016-03-17 12:28:55

解决方案4 0 2016-03-17 12:42:53

解决方案5 -1 2016-03-17 12:24:29

解决方案1
3 已采纳 2016-03-17 12:17:18

解决方案2
2 2016-03-17 12:13:55

解决方案3
0 2016-03-17 12:28:55

解决方案4
0 2016-03-17 12:42:53

解决方案5
-1 2016-03-17 12:24:29