Складной переключатель Jquery

ProgramBox

Складной переключатель Jquery

Post author:admin
Запись опубликована:18 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery-ui #content-management-system #jquery-ui-accordion

#javascript #jquery-пользовательский интерфейс #система управления контентом #jquery-пользовательский интерфейс-аккордеон

Вопрос:

Я пытался работать с Jquery accordion, и мне кажется, что это работает для меня, но когда я хочу использовать режим сворачивания / переключения, в котором я вижу, что все вкладки открыты для меня, тогда я сталкиваюсь с проблемой. У меня есть моя собственная CMS, и ниже приведен код для HTML. «Я хочу увидеть часть div, щелкнув заголовок». Я не хочу ничего менять в части HTML и просто хочу использовать jQuery здесь. HTML-ЧАСТЬ, JS-ЧАСТЬ, JQUERY следующим образом

     <div class="js-toggle-headline sf-toggle-headline">
        <h3 class="active">Headline 1</h3>
        <div>$charClone{Content Part 1</div>
        <h3>Headline 2</h3>
        <div>$charClone{Content Part 2$ }{30}</div>
        <h3>Headline 3</h3>
        <div>$charClone{Content Part 3$ }{30}</div>
    </div>

Javascript и Jquery

 $$js_toggle{$hashTable.new
{selector}{h3}
{target}{div}
{container}{.js-toggle-headline}
{animation}{slide}
{initialize}{$java.new{java.lang.Boolean}{1}}
{toggleClass}{active}}


$(function(){
            $('.js-toggle-headline').accordion({
                heightStyle: 'target',
                active: false,
                collapsible: true,
                autoHeight: true
            });
        });

1. Я не на 100% понимаю, чего пытаюсь достичь? … есть ли лучший способ объяснить? Хотя я не знаком с $$js_toggle синтаксической частью, но игнорирую это, щелчок по заголовкам, похоже, показывает / скрывает соответствующий раздел div, который, похоже, работает.

2. Спасибо за ответ. Я на самом деле хочу показать переключатель, где, если я щелкну по одному заголовку, он будет открыт, затем щелкните по второму заголовку, он также будет открыт, но первый останется открытым и так далее. Я думаю, вы поняли. но проблема в том, что я не хочу ничего менять в части HTML. Я просто хочу использовать тот же HTML и вместе с тем хочу использовать JS и Jquery.

Ответ №1:

Ну, я думал, что есть варианты API, позволяющие заставить его работать без сворачивания других разделов, но, видимо, нет. Тем не менее, поведение может быть достигнуто с помощью некоторых модов, но требует незначительного изменения html. Конкретные изменения см. В трех комментариях к коду.

 $(document).ready(function() {
                      // add div in the selector
    $('.js-toggle-headline > div').accordion({
        heightStyle: 'target',
        active: false,
        collapsible: true,
        autoHeight: true,
        header: 'h3'  // set the designated accordion header element
    });
});

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <div class="js-toggle-headline sf-toggle-headline">
      <div> <!-- add a div wrapper to each group -->
        <h3>Headline 1</h3>
        <div>Content Part 1</div>
      </div>
      <div>
        <h3>Headline 2</h3>
        <div>Content Part 2</div>
      </div>
      <div>
        <h3>Headline 3</h3>
        <div>Content Part 3</div>
      </div>
    </div>

=====

Другой способ, без дополнительного html, для достижения аналогичного эффекта аккордеона, но без использования аккордеона, предоставляемого jqueryui, но использует jquery для обработки: (очевидно, будет не таким причудливым и без анимации)

Конечно, сохраните jqueryui для других нужд виджета.

 // handler for each h3 with the section class.
$('h3.section').on('click', function() {
      let child = $(this).next();
      if (child.is(':hidden')) {
          child.show();
      } else {
          child.hide();
      }
});

 #accordion > h3 {
    border-radius: 5px;
    background-color: lightgray;
    margin: 1px;
    padding: 5px;
}

#accordion > div {
    display: none;
    margin-left: 20px;
    padding: 5px;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="accordion"> <!-- I kept the same ID for CSS -->
      <h3 class="section">Headline 1</h3>
      <div>Content Part 1</div>
      <h3 class="section">Headline 2</h3>
      <div>Content Part 2</div>
      <h3 class="section">Headline 3</h3>
      <div>Content Part 3</div>
      <h3 class="section">Headline 4</h3>
      <div>Content Part 4</div>
</div>
<!-- I added class="section" to each h3, in case other h3 elements might exist -->

1. Спасибо за помощь, но возможно ли это без добавления дополнительного div? потому что я не хочу редактировать HTML-часть.

2. Возможно, но не стал бы использовать аккордеон из jqueryui. Смотрите обновленную часть ответа, в которой для аккордеона вообще не используется jqueryui.