Question

我正在尝试创建一个按钮，用于切换包含对评论的某些回复的div。我希望能够隐藏并显示点击按钮的评论回复。并且＆＃34;显示所有回复＆＃34;只有在评论有多个回复时才会显示按钮。但每当我点击按钮时，都没有任何反应。控制台也不会显示任何错误。这是代码：

<?php 
if($numberOfReplies>=1){
?>
    <button id="repliestogglebutton">show all replies</button>

<?php
}               
?>

<div class="allreplies" id="allrepliesdiv" style="display:none;">
  (all replies to a comment are displayed here)
</div>

jQuery的：

$(document).ready(function(){
    jQuery("#repliestogglebutton").click(function() {
        jQuery("#allrepliesdiv").toggle();
    });
});

提前致谢！

Answer 1

您给出的代码对我来说很好。可能有任何其他原因导致问题。 PFA。您可以在新文件中测试的工作代码。（“慢”是切换时应用的动画。）

data

Answer 2

这应该可以解决问题。

＆＃13;

$(document).ready(function(){
	$(".button").click(function(){
  	$(".answer-container").toggleClass("visible");
  });
});

＆＃13;

.button{
  width:100px;
  height:20px;
  line-height:20px;
  text-align:center;
  border:1px solid #CCCCCC;
  background-color:#FFFFFF;
  cursor:pointer;
}

.button:hover{
   background-color:#FFEEEE;
}

.visible{
  display:block !important;
}

.answer-container{
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
Show all
</div>
<div class="answer-container">
Extra Comments
<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

＆＃13;

我使用div作为按钮但你可以使用任何东西。

Answer 3

你可以使用任何一种方法：

jQuery(document).ready(function(){
    jQuery("#repliestogglebutton").click(function() {
        jQuery("#allrepliesdiv").slideToggle();
    });
});

$(document).ready(function(){
    $("#repliestogglebutton").click(function() {
        $("#allrepliesdiv").slideToggle();
    });
});

//If jquery conflict then use this method
var $j = jQuery.noConflict();
 $j(document).ready(function(){
     $j("#repliestogglebutton").click(function() {
         $j("#allrepliesdiv").slideToggle();
    });
});

无法使用jQuery

3 个答案: