定位jQuery/Java切换内容

Positioning of jQuery/Java toggle content

本文关键字：Java jQuery 定位      更新时间：2023-09-26

我有以下html代码:

<div class="test-container">
    <div class="slide-button" data-content="panel1">
        <p><span class="panel-icon">+</span>  Test1</p>
    </div>  
    <div id="panel1" style="display: none">
        <p> Test jquery menu1 </p>
    </div>
    <div class="slide-button" data-content="panel2">
        <p><span class="panel-icon">+</span>  Test2</p>
    </div>  
    <div id="panel2" style="display: none">
        <p> Test jquery menu2 </p>
    </div>
</div>

和以下jQuery/Java-Code:

$(".slide-button").on('click', function() {
   var panelId = $(this).attr('data-content');
   $('#'+panelId).toggle(500);
   $(this).find('.panel-icon').text(function(_, txt) {
       return txt === "+" ? "-" : "+";
   }); 
});

这个开关本身工作得很好。当我点击滑动按钮时，内容就会向下滑动。然而，在滑动动画完成后，内容以某种方式"跳上"到最终位置。

我怎样才能避免这种"跳跃"，让内容停留在它是在滑下动画完成后?

感谢您的帮助:-)

我不知道你的情况是什么，以及你是否需要<p>段落标签，但如果你在你的"面板"内切换<p>标签到<span>标签，它似乎解决了你的问题。我使用的修复跳转的HTML代码如下所示:

<div class="test-container">
<div class="slide-button" data-content="panel1">
    <p><span class="panel-icon">+</span> Test1</p>
</div>
<div id="panel1" style="display: none">
    <!-- Here is the first change from a paragraph to a span tag -->
    <span>Test jquery menu1</span>
</div>
<div class="slide-button" data-content="panel2">
    <p><span class="panel-icon">+</span> Test2</p>
</div>
<div id="panel2" style="display: none">
    <!-- Here is the second change from a paragraph to a span tag -->
    <span>Test jquery menu2</span>
</div>

另外，只是一个友好的提示，Java和JavaScript不一样。

相关文章：