Question

我目前有一个可点击的div，它应该实现slideToggle（）函数。我已经在JSFiddle上编写了代码 - 这里它可以正常工作。但是，在我的网站上，它显示一旦显示隐藏自己。所以它会在点击时滑入。

// HEADERS

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

停止了这个问题。但是，该站点需要此lib。关于什么可能在这里引起冲突的任何建议？

标准Jquery.min lib和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>

Answer 2

可能是所有CSSt。如果区域的大小正在扩展，它可以显示，然后在DOM中呈现一瞬间后移动。

JQuery slideToggle（） - 然后显示隐藏。不会保持不变

2 个答案: