Отрегулируйте функцию JS Expand / Collapse, которая имеет некоторое увеличение текучести

0

Я реализовал эту потрясающую функцию JS/Jquery expand/collapse на странице, но у нее получился небольшой перегиб, который я бы хотел исправить.

В частности, проблема заключается в том, что при первом щелчке по ссылкам на веб-сайтах ▾ меню прекрасно расширяется, но перед этим оно немного подпрыгивает, и я хочу удалить его. Переход не происходит в скрипте JS, и это не происходит при нажатии, чтобы развернуть/свернуть после моментального щелчка, поэтому я подозреваю, что мой CSS может быть проблемой, но я просто не уверен.

Любая помощь приветствуется. Спасибо за ваше время.

JS был заимствован из этой скрипты JS

И вот тестовая страница, которую я опубликовал

Кроме того, здесь весь код (лишенный некоторого избыточного контента для упрощения)

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

JS

// 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;";
        });
    });

  });
});
  • 1
    У вас есть JSFiddle для вашего кода?
Теги:

1 ответ

0
Лучший ответ

Первоначально содержимое внутри вашего 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>

Должен исправить проблему..

Поделиться
  • 0
    Работал хорошо, спасибо!
  • 0
    теперь у меня есть дополнительный вопрос. Когда функция раскрытия открывает div, внизу появляется еще один небольшой излом, который влияет на последний div текста в стиле меньшего размера. Любое предложение о том, как это исправить тоже?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню