Question

 <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show().click(function () {
    $(this).next(".slidingDiv").slideToggle();
});
});
</script>
<style>
.slidingDiv {
height:100px;
background-color: #DCFCF2;
padding:20px;
margin-top:10px;
border-bottom:5px solid #99FFFF;
width:400px;
}

.show_hide {
display:none;
}
</style>
</head>
<body>
<a href="#" class="show_hide">Reply</a>
<div class="slidingDiv">
 <input type="text" placeholder="Your Name">
 <input type="text" placeholder="Your Email">
<a href="#" class="show_hide">hide</a></div>
</body>

这段代码工作得很完美..但是当我把这段代码放在另一页面中时，通过ajax加载它，jquery无法运行..我的页面中已经有一个滑动div了。检查另一个菜单后，我在那里使用ajax。但是在页面加载后，jquery无法正常工作。我主页中的jqueries是

<script src="js/jquery-1.7.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/script.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script src="js/slide.js" type="text/javascript"></script>

这里有什么帮助吗？提前谢谢..

Answer 1

试试这个：

$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();// perhaps you want $(".show_hide").toggle(); here
$(".show_hide").click(function (e) {
       e.preventDefaul();// you need preventDefault as you are clicking to a link
   $(this).next(".slidingDiv").slideToggle();
});
});

Answer 2

我编辑你的代码并且它有效。

检查：http://jsfiddle.net/mehmetakifalp/Q6k95/

你不能使用$（this）.next（）;因为用于不同区域的点击课程。它不知道下一个元素在哪里？

像这样编辑你的jquery：

$(".show_hide").click(function () {
 $(".slidingDiv").slideToggle();
});

多个jquery库无法正常工作

2 个答案: