Блог

Главная - Вопросы по программированию - Accordion испытывает проблему с jQuery

Accordion испытывает проблему с jQuery

#javascript #html #jquery #css #accordion

#javascript #HTML #jquery #css #аккордеон

Вопрос:

В настоящее время я работаю над выпадающим списком HTML с помощью Accordion amp; jQuery. Например, в приведенном ниже фрагменте у меня есть элементы управления AU с разными уровнями. Я хочу организовать родительские строки с рангом уровня, а затем соответствующие элементы управления под каждой родительской строкой уровня.

 $(document).ready(function() {
  $('.ui.accordion').accordion();

  /* Alternative way to change color of accordion */
  //$(".drop").css("color", "yellow");
}); 
 /* this doesn't work*/

.ui.styled.accordion .accordion .title,
.ui.styled.accordion .title {
  color: black;
  background-color: #eee;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  height: auto;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.5s;
}

.ui.styled.accordion .accordion .title,
.ui.styled.accordion .title:hover {
  color: #f2711c;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css">


<div class="ui stackable grid container">
  <div class="one column row">
    <div class="column">
      <div class="ui styled accordion">
        <!-- Accordion parent -->
        <div class="title"><i class="dropdown icon"></i>Level 2</div>
        <div class="content">
          <div class="ui divider"></div>
          <div class="ui stackable grid container">
            <div class="three column row">
              <div class="column">
                <div class="ui styled accordion">
                  <div class="title drop"><i class="dropdown icon"></i>AU.2.041 Ensure that the actions of individual system users can be uniquely traced to those users so they can be held accountable for their actions.</div>
                  <div class="content">
                    hi
                  </div>
                </div>
              </div>
              <div class="column">
                <div class="ui styled accordion">
                  <div class="title drop"><i class="dropdown icon"></i>AU.2.042 Create and retain system audit logs and records to the extent needed to enable the monitoring, analysis, investigation, and reporting of unlawful or unauthorized system activity.</div>
                  <div class="content">
                    hi
                  </div>
                </div>
              </div>
              <div class="column">
                <div class="ui styled accordion">
                  <div class="title drop"><i class="dropdown icon"></i>AU.2.043 Provide a system capability that compares and synchronizes internal system clocks with an authoritative source to generate time stamps for audit records.</div>
                  <div class="content">
                    hi
                  </div>
                </div>
              </div>
              <div class="column">
                <div class="ui styled accordion">
                  <div class="title drop"><i class="dropdown icon"></i>AU.2.044 Review audit logs.</div>
                  <div class="content">
                    hi
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Обновить:
Я разобрался с проблемой вложенности и смог это исправить. Теперь проблемы, с которыми я сталкиваюсь, — это то, что, как я полагаю, связано с jQuery. Когда я запускаю свой тестовый пример в JSFiddle, родительская строка открывается и содержит все правильные дочерние строки, которые я хотел в ней. Когда я пытаюсь открыть дочерние строки, они открываются на полсекунды, а затем сразу же сворачиваются.

Ответ №1:

Хорошо, после тестирования и чтения документации я обнаружил проблему. Вы ограничиваете несколько вложенных divs с accordion

Теперь давайте посмотрим ваш html и попытаемся разобраться в проблеме.

Это ваш оригинальный Html

 <div class="ui stackable grid container">
                    <div class="one column row">
                        <div class="column">
                            <div class="ui styled accordion"> <!-- Accordion parent -->
                                <div class="title"><i class="dropdown icon"></i>Level 2</div>       
                                <div class="content">
                                    <div class="ui divider"></div>
                                    <div class="">
                                        <div class="three column row">
                                            <div class="column">
                                                <div class="ui styled accordion">
                                                    <div class="title drop"><i class="dropdown icon"></i>AU.2.041 Ensure that the actions of individual system users can be uniquely traced to those users so they can be held accountable for their actions.</div>
                                                    <div class="content">
                                                        hi
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

Теперь, если вы присмотритесь, вы увидите более одного div .ui.accordion
, который содержит содержимое, вызывающее проблему.

лучшее решение — присвоить div( ui stackable grid container ) новый класс или идентификатор и вместо этого попытаться связать его с этим идентификатором.

Вот результат

 $(document).ready(function(){
    $('.retro').accordion();
  
  /* Alternative way to change color of accordion */
  //$(".drop").css("color", "yellow");
}); 
 /* this doesn't work*/
.ui.styled.accordion .accordion .title, .ui.styled.accordion .title {
    color: black;
  background-color: #eee;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  height: auto;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.5s;
}

.ui.styled.accordion .accordion .title, .ui.styled.accordion .title:hover {
    color: #f2711c;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css">


<div class="ui stackable grid container retro">
                    <div class="one column row">
                        <div class="column">
                            <div class="ui styled accordion"> <!-- Accordion parent -->
                                <div class="title"><i class="dropdown icon"></i>Level 2</div>       
                                <div class="content">
                                    <div class="ui divider"></div>
                                    <div class="ui stackable grid container">
                                        <div class="three column row">
                                            <div class="column">
                                                <div class="ui styled accordion">
                                                    <div class="title drop"><i class="dropdown icon"></i>AU.2.041 Ensure that the actions of individual system users can be uniquely traced to those users so they can be held accountable for their actions.</div>
                                                    <div class="content">
                                                        hi
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="column">
                                                <div class="ui styled accordion">
                                                    <div class="title drop"><i class="dropdown icon"></i>AU.2.042 Create and retain system audit logs and records to the extent needed to enable the monitoring, analysis, investigation, and reporting of unlawful or unauthorized system activity.</div>
                                                    <div class="content">
                                                        hi
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="column">
                                                <div class="ui styled accordion">
                                                    <div class="title drop"><i class="dropdown icon"></i>AU.2.043 Provide a system capability that compares and synchronizes internal system clocks with an authoritative source to generate time stamps for audit records.</div>
                                                    <div class="content">
                                                        hi
                                                    </div>
                                                </div>
                                            </div>
                      <div class="column">
                                                <div class="ui styled accordion">
                                                    <div class="title drop"><i class="dropdown icon"></i>AU.2.044 Review audit logs.</div>
                                                    <div class="content">
                                                        hi
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

Комментарии:

1. Это работает идеально! Единственная проблема, с которой я сталкиваюсь, заключается в том, почему содержащие divs родительских строк не являются широкими вообще. Мне бы хотелось, чтобы он занимал большую часть ширины страницы (в данном случае страницы SharePoint), но ширина не растягивается до 100%? jsfiddle.net/tb36jsew Вот новая Скрипка

2. Если я вас правильно понимаю, то вы хотите иметь ширину 100%. затем вам нужно внести некоторые изменения в title «ui styled accordion» и в ui stackable grid container retro и сделать его шириной 100%. Не забывайте, что некоторые из них должны иметь !importend теги для переопределения библиотеки CSS

Метки: