javascript - 调整 JS Expand/Collapse 函数，它的流动性有点颠簸-6ren

javascript - 调整 JS Expand/Collapse 函数，它的流动性有点颠簸

转载作者：行者123 更新时间：2023-11-28 10:48:42

我一直在将这个很棒的 JS/Jquery 展开/折叠功能实现到页面中，但我想修复它的一个小问题。

具体来说，问题是当您第一次点击链接网站 ▾ 时，菜单展开得很好，但就在它完成之前它有一点跳转到它，我想消除。跳转不会发生在 JS Fiddle 中，也不会发生在初始点击后单击以展开/折叠时，因此我怀疑我的 CSS 可能是问题所在，但我不确定。

非常感谢任何帮助。感谢您的宝贵时间。

JS是借用这个JS Fiddle

这里是 a test page我发表了

此外，这是所有代码(为了简化而删除了一些多余的内容)

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="css/webfonts.css">
        <link rel="stylesheet" href="css/style.css">
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="js/expandcollapse.js"></script>
    </head>
    <div class="container">
        <div class="header">
            <span>
                <p>&nbsp; Websites &#9662;</p>
            </span>
        </div>
        <div class="content">
            <p>Human Rights Symbols</p>
            <p>
                Cornerstone Parks
            </p>
            <p>
                Eileen Fisher (Video Page)
            </p>
            <p>
                Suzy B Fine Jewelry*
            </p>
            <p class="para2">Niki International</p>
            <p class="para2">Eliza's Eyes</p>
            <p class="para2">Fabrikant-Tara</p>
            <p class="para2">Branded Jewelry</p>
        </div>
    </div>
    <h2>*To view password-protected links, 
        please request access by phone or email.
    </h2>
    </div>
    </body>
</html>

CSS

@charset "utf-8";
/* CSS Document */


.container {
    /* Expand Collapse Styling */
    width:100%;

}
.container div {
    width:100%;
}
.container .header {

    cursor: pointer;
    font-family: 'oxygenregular', arial, helvetica, sans-serif;
    font-size: 14px;
    line-height: 14px;
    color: gray;
}
.container .content {

    display: none;

}




#LightSlateGrayBar {
    /* Color: LightSlateGray, #778899, hsl(210, 22%, 60%) */
    width: 100%;
    height: 30px;
    background-color: rgba(119, 136, 153, 0.95);

}

.TopBar {
    position: fixed;
    top: 0; 
    left: 0;
    box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.25);
}

.BottomBar {
    position: fixed;
    bottom: 0;
    left: 0;
    box-shadow: -3px -3px 3px 0px rgba(0,0,0,0.25);
}


#box {
    min-width: 600px;
    max-width: 600px;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    text-align: center; 
}

p {
    font-family: 'oxygenregular', arial, helvetica, sans-serif;
    font-size: 14px;
    line-height: 14px;
    color: gray;
}

.para2 {
    color: LightGray;
}

.paraBlue {
    font-size: 18px;
    color: #25438d;
    margin-top: 26px;
}


h1 {
    font-family: 'rokkittregular', arial, helvetica, sans-serif;
    font-size: 42px;
    color: #25438d;
    margin-bottom: -20px;
}

.hyphen {
    font-size: 34px;
    letter-spacing: -2px;
}


h2 {
    font-family: 'oxygenregular', arial, helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: .5px;
    line-height: 12px;
    color: gray;    
}


a:link {
transition: all 1s linear 0;
transition-timing-function: ease-in;
text-decoration:none;
color: gray;
}

a:visited { 
text-decoration:none;
color: #8F8F8F;
}

a:hover {
text-decoration:underline;
color: black;
}

a:active { 
text-decoration:none;
color: lightGray;
}


.heading {
cursor: pointer;
position: relative;
}

// JavaScript Document

$(function() {
  $(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.html(function () {
            //change text based on condition
            return $content.is(":visible") ? "Websites &#9652;" : "Websites &#9662;";
        });
    });

  });
});

最佳答案

最初是您的 div#header 中的内容是

<div class="header">
 <span>
 <p>&nbsp; Websites &#9662;</p>
 </span>
</div>

从第一个切换开始，它将变为

Websites &#9662; // only the arrows character codes changes on further clicks, structure is same

没有<span>和 <p>元素，导致大小差异，进而导致跳跃。返回正确的 html 内容作为初始状态，如

return $content.is(":visible") ? "<span><p>&nbsp; Websites &#9652;</p></span>" : "<span><p>&nbsp; Websites &#9662; </p></span>";

或最初将内容更改为

<div class="header">
 Websites &#9662;
</div>

应该解决问题..

关于javascript - 调整 JS Expand/Collapse 函数，它的流动性有点颠簸，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22869851/

文章推荐： javascript - Spotify 如何屏蔽音频 URL 并阻止下载歌曲 mp3

文章推荐： javascript - JQuery 中未检测到单选按钮更改

c# - 棋子的 future 流动性
我目前正在用 C# 开发国际象棋引擎，在开发代码以确定任何给定棋子在第 1、2 和 3 步中的 future 移动性时，我遇到了一些困难。基本思想是奖励棋子移动性增加的奖励，惩罚移动性差的棋子。棋盘

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 调整 JS Expand/Collapse 函数，它的流动性有点颠簸