JQuery SlideToggle() - 显示然后隐藏。不保持切换状态

Question

我目前有一个可点击的div，它应该实现slideToggle() 函数。我已经在 J​​SFiddle 上对其进行了编码 - 这里它可以正常工作。然而，在我的网站上，它显示然后一旦显示就隐藏它自己。因此，单击时它会滑入然后滑出。

http://jsfiddle.net/sfvd9aha/19/

//标题

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
    <link rel="stylesheet"href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js">

//CSS

.info_button{
width: 50px;
height: 50px;
background-color: blue;
}
.info_text{
    display: none;
}

//HTML

<form style='text-align:center;' data-ajax="false" id="id_form" method="POST" action="submit.php">
<div class="containing-element">
    <label name='tbl_name'>Label</label>
    <div class='info_container'>
        <div class='info_button'>
        </div>
        <div class='info_text'>
         Here is some text.
        <div>
    </div>
</div>
<div id="extra_laps_range_stafford">
    <input type="range" onchange="changedSelector()" data-highlight="true" name="name[]" id="id" value="0" min="0" step="2" max="4"/>
    </div>
</form>

//JS

$('.info_button').click(function(){   
    $(this).siblings('.info_text').slideToggle();
});

有人能想到可能导致这种情况的任何原因吗？

虽然不是答案，但它让我更接近了。 删除 -

<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>

解决了这个问题。然而，该库是该站点所必需的。对于这里可能发生冲突的内容有什么建议吗？

标准 Jquery.min 库和 mobile.min 均已加载到页面。

谢谢大家的评论。他们提出的问题引导我找到答案。只需引入更新的 jquery.min.js 库。问题已解决，谢谢大家。

Answer 1

由于它在 jfiddle 上运行良好，这可能是由于在页面上调用 jquery 两次而导致的。像这样的事情

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>